Enhances React elements with Svelte-inspired event modifiers.
Svelte has a nice feature to modify events in useful ways. For example you can quickly call stopPropagation()
or preventDefault()
on your events with simple 'modifiers' on an element.
This library brings some of that functionality to React in a tiny ~1kB package.
<button on:click|stopPropagation="{handleClick}">
<!-- The click event wont't propagate -->
</button>
<form on:submit|preventDefault="{handleSubmit}">
<!-- The submit event won't reload the page -->
</form>
react-event-modifiers
does itimport mod from "react-event-modifiers"
<mod.button onClick-stopPropagation={handleClick}>
{/* The click event wont't propagate */}
</mod.button>
<mod.form onSubmit-preventDefault={handleSubmit}>
{/* The submit event won't reload the page */}
</mod.form>
Install the library:
npm i react-event-modifiers
When you have an element you wish to update like this:
<button onClick={handleClick}>Click me</button>
Then import the library and update the element as follows:
import mod from "react-event-modifiers"
<mod.button onClick-stopPropagation={handleClick}>Click me</mod.button>
Note the mod.
prefix to the element, and the -stopPropagation
modifier to the event handler prop.
You can use modifiers without a handler like this:
<mod.button onClick-stopPropagation>Click me</mod.button>
and chain modifiers together like this:
<mod.button onClick-preventDefault-stopPropagation={handleClick}>Click me</mod.button>
All native JSX elements are supported and this library should act as a drop in replacement which doesn't affect other props. Typescript is fully supported too!
Note that the only Svelte modifiers that are supported are stopPropagation
and preventDefault
. React already supports capture
events and other modifiers were deemed too niche to implement.
Part of the reason for building this little library was to see if this was possible.
It works as follows:
react-event-modifier
returns a proxy object.<mod.div ...>
the proxy is called with the keyword 'div' and all of the react props.div
) and event handlers (like onClick
) are modifiable.Modifying the props:
{ "onClick-stopPropagation": customHandler }
.-stopPropagation
and wrap functions with an appropriate handler.{ "onClick": (e) => { e.stopPropagation(); customHandler(e) } }
Creating the types:
<mod.div>
should have all of the props and types of <div>
<mod.div onClick-stopPropagation={...}>
should have the same signature as onClick={...}
JSX.IntrinsicElements
types into custom onesonClick
to onClick-stopPropagation
className
are not polluted with modifiers.It's a definitely a tiny quality of life feature but it comes in handy. It really shines when making games and modals where there are many overlaying clickable elements. Having a simple modifier can keep code clean and even save you from making your own click wrappers. It's also a nice feature if you're writing a lot of client-side forms.
Issues and PRs are welcome!
Useful commands:
npm run tests
npm run check
cd react-demo-ts/
then npm run dev
npm run build