Skip to content
A set of reusable React Hooks.
Branch: master
Clone or download
Latest commit 602f5c7 May 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ add useUndo hook May 14, 2019
example add useUndo hook May 14, 2019
src add useUndo hook May 14, 2019
.babelrc add CI config Jan 1, 2019
.eslintrc.json add some tests Jan 14, 2019
.gitignore add CI config Jan 1, 2019
.travis.yml add coverall Jan 1, 2019
LICENSE Create LICENSE Oct 26, 2018
README.md add useUndo hook May 14, 2019
jest.config.js add lifecycle tests Jan 1, 2019
jest.init.js add lifecycle tests Jan 1, 2019
package.json 0.0.18 May 14, 2019
yarn.lock add useUndo hook May 14, 2019

README.md

React Hooks Lib · Build Status Coverage Status

A set of reusable React Hooks.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Installation

npm i react-hooks-lib --save

Examples

Visit here

Hooks

Name Arguments Returns
Lifecycles
useDidMount f -
useWillUnmount f -
useDidUpdate f, conditions -
State
createContextState initial { ContextProvider, ContextConsumer, set, useContextState }
createGlobalState initial { GlobalProvider, GlobalConsumer, set, useGlobalState }
useMergeState initial { state, set }
useUndo initial { past, present, future, set, undo, redo }
useCounter initial { count, set, reset, inc, dec }
useToggle initial { on, set, reset, toggle }
useList initial { list, set, reset, push, sort, filter }
useMap initial { values, set, reset, clear, get, has, del }
Network
useFetch initialUrl, initialOptions, config { loading, data, error, fetch, setUrl, setOptions, setData }
useOnlineStatus
Feedback
useHover - { hovered, bind }
useActive - { active, bind }
useFocus - { focused, bind }
useTouch - { touched, bind }
Data Entry
useField initial { value, set, reset, bind }

API

useDidMount(f)

Similar to componentDidMount in React class component.

Arguments

  • f: () => void: f is called when component did mount.
import { useDidMount } from 'react-hooks-lib'

const MyComponent = () => {
  useDidMount(() => {
    console.log('didMount')
  })
}

useWillUnmount(f)

Close to the componentWillUnmount in React class component.

Arguments

  • f: () => void: f is called when component will unmount.
import { useWillUnmount } from 'react-hooks-lib'

const MyComponent = () => {
  useWillUnmount(() => {
    console.log('willUnmount')
  })
}

useDidUpdate(f, options?)

Similar to componentDidUpdate, it only runs on updates.

Arguments

  • f: () => Function | void: f is called on every updates. Like useEffect, f can return a clean-up function.
  • conditions?: Array<any>: Optional array for conditionally firing an effect, same as the second argument passed to useEffect.
import { useDidUpdate, useCounter } from 'react-hooks-lib'

const MyComponent = () => {
  const { count, inc } = useCounter(0)
  useDidUpdate(() => {
    console.log('DidUpdate')
  })
  return (
    <div>
      {`count: ${count}`}
      <button onClick={() => inc(1)}>+1</button>
    </div>
  )
}

createContextState(initial?)

createGlobalState(initial?)

useMergeState(initial?)

Arguments

  • initial?: Object: Initial state object, default is {}.

Returns

  • state: Object: Current state object.
  • set: ((Object) => Object) | Object: Like setState in React class component, merge the old and new state together.
import { useMergeState } from 'react-hooks-lib'

const MergeState = () => {
  const { state, set } = useMergeState({ name: 'Victor', age: 1 })
  return (
    <div>
      <h3>useMergeState</h3>
      <div>
        {`state: ${JSON.stringify(state)}`}
        <button onClick={() => set(({ age }) => ({ age: age + 1 }))}>age+1</button>
      </div>
    </div>
  )
}

useUndo(initial)

useCounter(initial)

import { useCounter } from 'react-hooks-lib'

const Counter = () => {
  const {
    count, inc, dec, reset,
  } = useCounter(1)
  return (
    <div>
      {count}
      <button onClick={() => inc(1)}>+1</button>
      <button onClick={() => dec(1)}>-1</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

useToggle(initial)

import { useToggle } from 'react-hooks-lib'

const Toggle = () => {
  const { on, toggle, reset } = useToggle(false)
  return (
    <div>
      {String(on)}
      <button onClick={toggle}>toggle</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

useList(initial)

import { useList } from 'react-hooks-lib'
const List = () => {
  const { list, sort, filter } = useList([1, 4, 2, 3, 4, 2, 6, 8, 3, 4])
  return (
    <div>
      list:
      {JSON.stringify(list)}
      <button onClick={() => sort((x, y) => x - y)}>sort</button>
      <button onClick={() => filter(x => x >= 4)}> greater than or equal to 4</button>
    </div>
  )
}

useMap(initial)

useFetch(initialUrl, initialOptions?, onMount?)

import { useField, useFetch } from 'react-hooks-lib'

const Fetch = () => {
  const getUrl = text => `https://api.github.com/search/repositories?q=${text}`
  const { value, bind } = useField('react')
  const { data, loading, setUrl } = useFetch(getUrl('react'))
  return (
    <div>
      <h3>useFetch</h3>
      <input type="text" value={value} {...bind} />
      <button onClick={() => {
        setUrl(getUrl(value))
      }}
      >
        search
      </button>
      {
        loading
          ? <div>Loading...</div>
          : (<span>{`total_count: ${data.total_count}`}</span>)
      }
    </div>
  )
}

useOnlineStatus()

useHover()

import { useHover } from 'react-hooks-lib'

const Hover = () => {
  const { hovered, bind } = useHover()
  return (
    <div>
      <div {...bind}>
        hovered:
        {String(hovered)}
      </div>
    </div>
  )
}

useActive()

useFocus()

useTouch()

useField(initial)

  import {useField} from 'react-hooks-lib'

  const Input = () => {
    const { value, bind } = useField('Type Here...')

    return (
      <div>
        input text:
        {value}
        <input type="text" {...bind} />
      </div>
    )
  }

  const Select = () => {
    const { value, bind } = useField('apple')
    return (
      <div>
        selected:
        {value}
        <select {...bind}>
          <option value="apple">apple</option>
          <option value="orange">orange</option>
        </select>
      </div>
    )
  }
You can’t perform that action at this time.