Thư viện React Hooks: Một bộ sưu tập tiện lợi các React Hooks có thể tái sử dụng

Thư viện React Hooks

Một tập hợp các React Hooks có thể tái sử dụng.

Hooks là một thêm mới trong React 16.8. Chúng cho phép bạn sử dụng trạng thái và các tính năng React khác mà không cần viết một lớp.

Cài đặt

npm i react-hooks-lib --save

Ví dụ

Truy cập storybook

Hooks

API

useDidMount(f)

Tương tự như componentDidMount trong React class component.

Tham số

• f: () => void: f được gọi khi component được mount. “`js 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.
```js
import { useWillUnmount } from 'react-hooks-lib'

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

useDidUpdate(f, options?)

Tương tự như componentDidUpdate, nó chỉ chạy khi có sự cập nhật.

Tham số

• f: () => Function | void: f được gọi trong mọi lần cập nhật. Giống như useEffect, f có thể trả về một hàm dọn dẹp.
• conditions?: Array<any>: Mảng tùy chọn để điều kiện việc chạy một hiệu ứng, tương tự như đối số thứ hai truyền vào useEffect. “`js import { useDidUpdate, useCounter } from ‘react-hooks-lib’

const MyComponent = () => { const { count, inc } = useCounter(0) useDidUpdate(() => { console.log(‘DidUpdate’) }) return (

{count: ${count}} inc(1)}>+1

) }

### `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.
```js
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>
  )
}

useNestedState

Tham số

• initial?: Trạng thái ban đầu, mặc định là undefined.

Trả về

• state: Trạng thái hiện tại.
• get(pathString, defaultValue): Lấy giá trị từ trạng thái tại một pathString cụ thể. Ví dụ: get("a.b.c")/get("" | undefined), nếu pathString rỗng, nó sẽ trả về đối tượng trạng thái.
• set: (pathString, newValue | prevValue => newValue): Đặt giá trị tại một pathString cụ thể. Ví dụ: set("a.b.c", prev => prev + 1)/set("" | undefined, {}). Nếu pathString rỗng, nó sẽ đặt toàn bộ đối tượng trạng thái.

useStateCallback(initial, f?)

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>
    )
  }

---

Chi tiết tải về:

Tác giả: beizhedenglong
Nguồn: https://github.com/beizhedenglong/react-hooks-lib

Giấy phép: MIT license

Tags: javascript