可复用的 React Hooks Library

时间:2021-1-8 作者:admin

A set of reusable React Hooks.

Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha and being discussed in an open RFC.

Installation

npm i react-hooks-lib --save

Examples

Vist here

Hooks

Name Input Output
useCounter initial { count, set, reset, inc, dec, incBy, decBy }
useToggle initial { on, set, reset, toggle }
useHover { hovered, bind }

Usage

useCounter

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

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

useToggle

useHover

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

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

TODO

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。