react-ref

react-ref

:point_right: Set reference to an element in React components

Made with ❤ at @outlandish

Install

API

npm install --save react-ref

CLI

npm install --global react-ref

Import

// ES6
import ref from 'react-ref'

// CommonJS
var ref = require('react-ref')

Usage

ref(instance, name)

• instance {Object} React component
• name {String} Name of property to attach element reference

Returns a function.

Example:

class Input extends React.Component {
  focus () {
    this.input.focus()  
  }
  
  clear () {
    this.input.value = ''  
  }
  
  render () {
    return (
      <div className='Input'>
        <input type='text' ref={ref(this, 'input')} />
      </div>
    )  
  }
}

Contributing

All pull requests and issues welcome!

If you're not sure how, check out Kent C. Dodds' great video tutorials on egghead.io!

Author & License

react-ref was created by Sam Gluck and is released under the MIT license.