https://github.com/robinfr/html-to-react-events

Convert HTML event names to React event handler names.
https://github.com/robinfr/html-to-react-events

events html javascript react

Last synced: 6 days ago
JSON representation

Convert HTML event names to React event handler names.

• Host: GitHub
• URL: https://github.com/robinfr/html-to-react-events
• Owner: Robinfr
• License: mit
• Created: 2018-01-18T08:58:28.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-22T13:19:59.000Z (about 6 years ago)
• Last Synced: 2024-10-10T04:07:56.039Z (27 days ago)
• Topics: events, html, javascript, react
• Language: TypeScript
• Homepage:
• Size: 85 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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:

```bash

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

```

## Usage

Getting the event handler name in React:

```javascript

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

const eventName = 'dblclick';

const reactEventHandler = convertEvent(eventName);

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

```

Binding a single event:

```javascript

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

const eventName = 'dblclick';

const MyComponent = ({onConfirm}) => (

    


        Double click to confirm

    

);

```


Binding multiple events:

```javascript

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

const eventName = 'dblclick';

const MyComponent = ({onEdit, onConfirm}) => {

    const events = {

        'click': onEdit,

        'dblclick': onConfirm

    };

    return (

        


            One click to edit. 


            Double click to confirm.

        

    );

}

```


## Supported events

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

## TypeScript

Typings are included in the library.

## License

MIT © [R. Franken](https://github.com/Robinfr)