mantine use-disclosure を使って 開け閉めできるコンポーネントの状態を管理する

これなに

toggleで開け閉めするするときに使います！

いちいちuseStateで定義しなくてもOK！

参考リンク

https://mantine.dev/hooks/use-disclosure/

実装

４行のコードが１行になります！

//before
const [isOpen, setIsOpen] = useState(false);
const handleToggle = () => {
  setIsOpen((prev) => !prev);
};

//after
const [opened, handlers] = useDisclosure(false);

after において、 opened が状態を管理する state であり、handlers には以下が含まれています。

handlers.open()
handlers.close()
handlers.toggle()

より詳細なコード

before

import {useState} from "react";

export const HogeCompornent() => {
  const [isOpen, setIsOpen] = useState(true);
  
  const handleToggle = () => {
    setIsOpen((prev) => !prev);
  };

  const Toggle = () => {
    const label = isOpen ? "閉じる" : "開く";
    return (
      <Button onClick={handleToggle} >
        {label}
      </Button>
    );
  };
  return (
    <Toggle />
  );
};

after

import { useDisclosure } from "@mantine/hooks";

export const HogeCompornent() => {
  const [opened, handlers] = useDisclosure(false);

  const Toggle = () => {
    const label = opened ? "閉じる" : "開く";
    return (
      <Button onClick={handlers.toggle} >
        {label}
      </Button>
    );
  };
  return (
    <Toggle />
  );
};