📖 Overview

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.

$3

``html









`

$3

`jsx
import mod from "react-event-modifiers"


{/ The click event wont't propagate /}



{/ The submit event won't reload the page /}

`

---

🚀 Get started

Install the library:

`shell
npm i react-event-modifiers
`

When you have an element you wish to update like this:

`jsx
Click me
`

Then import the library and update the element as follows:

`jsx
import mod from "react-event-modifiers"

Click me
`

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:

`jsx
Click me
`

and chain modifiers together like this:

`jsx
Click me
`


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!

!Typescript example


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.

---

🧐 How it works

Part of the reason for building this little library was to see if this was possible.

It works as follows:

- Importing react-event-modifier returns a proxy object.
- When you call the proxy is called with the keyword 'div' and all of the react props.
- This library can then create a normal react 'div' element and modify the props in any way we like.
- Typescript is used to ensure that only native elements (like div) and event handlers (like onClick) are modifiable.

Modifying the props:

- The props are given as a simple JS object with keys/vals like { "onClick-stopPropagation": customHandler }.
- This library can then strip out the modifiers like -stopPropagation and wrap functions with an appropriate handler.
- Finally the new handler is assigned to the default keyword and the result is a modified object like { "onClick": (e) => { e.stopPropagation(); customHandler(e) } }

Creating the types:

- One critical piece of this library is ensuring that React types are maintained when using the library. For example:
- The element should have all of the props and types of