https://github.com/team-griffin/react-action-handler

https://github.com/team-griffin/react-action-handler

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/team-griffin/react-action-handler
• Owner: team-griffin
• Created: 2017-03-06T16:08:22.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-07T08:54:06.000Z (almost 8 years ago)
• Last Synced: 2024-04-26T06:21:15.492Z (8 months ago)
• Language: JavaScript
• Size: 40 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-action-handler

`npm install @team-griffin/react-action-handler --save`

`yarn add @team-griffin/react-action-handler`

We got kind of fed up of rewriting a component or container which needed an event handler from a pure react function to an es6 component. So we decided to make it an HOC!

## Usage

```javascript

// MyComponent

import actionHandler from '@team-griffin/react-action-handler';

const MyComponent = (props) => {

  return (

    

      {props.children}

    

  );

};

export default actionHandler({

  handleClick: function(e) {

    this.props.onClick(this.props.id);

  }

})(MyComponent);

// MyParent

const MyParent = (props) => {

  return (

    

      Foobar

    

  );

};

```

Action handler automatically maps the handler names to event names. This is to ensure best practices.

Example:

```javascript

handleClick -> onClick

handleMouseUp -> onMouseUp

```

## Important

The callback functions defined are bound to the action handler component. If an arrow function is used this context is lost and you will be unable to access props.