自定义hooks

作为react的使用者，自定义hooks是常见的业务需求，小弟技术水平有限，只能先借花献佛聊下公司里大佬们封装的自定义hooks了

import { useMemo } from 'react';
import { useToggle } from '@pansy/use-toggle';

export interface Actions {
  setTrue: () => void;
  setFalse: () => void;
  set: (value: boolean) => void;
  toggle: () => void;
}

export function useBoolean(defaultValue = false): [boolean, Actions] {
  const [state, { toggle, set }] = useToggle(defaultValue);

  const actions: Actions = useMemo(
    () => {
      const setTrue = () => set(true);
      const setFalse = () => set(false);

      return {
        toggle,
        set: (v) => set(!!v),
        setTrue,
        setFalse,
      };
    },
    []
  );

  return [state, actions];
};

优雅的管理 boolean 值的 Hook。 useToggle的实现参见 juejin.cn/post/704708…

用法如下

import React from 'react';
import { Button, Switch } from 'antd';
import { useBoolean } from '@pansy/hooks';


export default () => {
  const [state, { toggle, setTrue, setFalse }] = useBoolean();


  return (
    <div>
      <p>
        <Switch checked={state} onChange={toggle} />
      </p>
      <p>
        <Button type="default" onClick={() => toggle()}>
          Toggle
        </Button>
        <Button type="dashed" onClick={setFalse} style={{ margin: '0 16px' }}>
          Toggle False
        </Button>
        <Button type="primary" onClick={setTrue}>
          Toggle True
        </Button>
      </p>
    </div>
  );
};

个人的分享记录，不喜勿喷。