html-to-react-events
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

HTML to React events

Converts HTML event names to React event handler names.

Ever tried working with HTML event names but needed to have the name of the related React event handler? Now you can use this library to easily retrieve the event handler name or bind to it straight away.

Install

Install with NPM/Yarn:

npm install html-to-react-events --save

Usage

Getting the event handler name in React:

import { convertEvent} from 'html-to-react-events';

const eventName = 'dblclick';
const reactEventHandler = convertEvent(eventName);

console.log(reactEventHandler); //Will return onDoubleClick

Binding a single event:

import { bindEvent } from 'html-to-react-events';

const eventName = 'dblclick';

const MyComponent = ({onConfirm}) => (
    <div {...bindEvent(eventName, onConfirm)}>
        Double click to confirm
    </div>
);

Binding multiple events:

import { bindEvents } from 'html-to-react-events';

const eventName = 'dblclick';

const MyComponent = ({onEdit, onConfirm}) => {
    const events = {
        'click': onEdit,
        'dblclick': onConfirm
    };

    return (
        <div {...bindEvents(events)}>
            One click to edit. <br />
            Double click to confirm.
        </div>
    );
}

Supported events

For the supported events, see https://reactjs.org/docs/events.html.

TypeScript

Typings are included in the library.

License

MIT © R. Franken

Readme

Keywords

Package Sidebar

Install

npm i html-to-react-events

Weekly Downloads

164

Version

0.3.0

License

SEE LICENSE

Unpacked Size

25.7 kB

Total Files

53

Last publish

Collaborators

  • robinfr