https://github.com/praneshr/react-easy-bind

Easily bind class properties and pass additional parameters to callbacks.🍭 🍭 🍭
https://github.com/praneshr/react-easy-bind

babel decorators react

Last synced: 12 days ago
JSON representation

Easily bind class properties and pass additional parameters to callbacks.🍭 🍭 🍭

• Host: GitHub
• URL: https://github.com/praneshr/react-easy-bind
• Owner: praneshr
• Created: 2016-11-17T11:02:43.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-10T15:18:52.000Z (almost 8 years ago)
• Last Synced: 2024-10-17T22:57:41.597Z (19 days ago)
• Topics: babel, decorators, react
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Easy Bind

[![Build Status](https://circleci.com/gh/praneshr/react-easy-bind.svg?circle-token=60cd5e7bc411206f3c1b19c829d9420ab8fa4a0c&style=shield)](https://circleci.com/gh/praneshr/react-easy-bind)

[![NPM](https://nodei.co/npm/react-easy-bind.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-easy-bind/)

A class [decorator](https://github.com/wycats/javascript-decorators) for react(compatible with normal classes as well ) which automatically binds all the properties of the class and provides a powerful API to work with react event callbacks.

### Installation

```

npm i react-easy-bind --save-dev

```

or

``` html

```

### Heads up

Please configure your build system/[babel](https://babeljs.io) if you are using `react-easy-bind` as a **decorator**.

Please check [babel-plugin-transform-decorators-legacy](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy) for more details.

### Usage

``` javascript

//ES6 way

import React, { Component, PropTypes } from 'react'

import easyBind from 'react-easy-bind'

@easyBind

class Example extends Component {

  constructor(props) {

    super(props)

  }

  handleClick(v, e) {

    console.log(this)

  }

  render() {

    return (

      


        Hello world!

      

    )

  }

}


//ES5 way

var React = require('react')

var easyBind = require('react-easy-bind')

var Example = React.createClass({

  handleClick(v, e) {

    console.log(this)

  },

  render() {

    return (

      


        Hello world!

      

    )

  }

}


easyBind(Example)

```

### `this.easyBind(fn[, param1[, param2[, ...]]])` API

The Easy Bind decorator will register an immutable function to the class and it'll be available as `this.easyBind()`.

`this.easyBind()` creates a wrapping function over the callback function. By this you can pass any additional parameters to the callback handler through `this.easyBind()` without any arrow functions or explicit bindings.

#### Example

``` javascript

//before

 this.handleClick('param1', 'param2', pe, e)}


//now