Rehooks

Setuppermalink

First, you need to install React v16.7 or higher:

npm install --save [email protected]^16.7.0-alpha.0 [email protected]^16.7.0-alpha.0

Or with yarn:

yarn add [email protected]^16.7.0-alpha.0 [email protected]^16.7.0-alpha.0

Now you can start writing useState and useEffect in your code. Here's a simple counter example:

import { useState } from 'react'

function Example() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

Alternatively, this is class-based equivalent:

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }

  onClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.onClick}>
          Click me
        </button>
      </div>
    )
  }
}

First install @rehooks/input-value:

yarn add @rehooks/input-value

Then apply useInputValue in your component:

import useInputValue from '@rehooks/input-value';

function MyComponent() {
  let name = useInputValue('Jamie');
  // name = { value: 'Jamie', onChange: [Function] }
  return <input {...name}/>;
}

FAQpermalink

React Hooks allow you to use React concepts like state, context and methods without writing a class.

Rehooks are packages that make it easy to use Hooks in your existing application.

Contributingpermalink

Please check out the rehooks/ideas repo or if you already know a Hook you want to build, check out the rehooks/template repo.

You can find the repo for this website at rehooks/website.