https://github.com/yoannfleurydev/react-use-disclosure

⚛️ Custom React Hook to handle open/close/toggle of a state.
https://github.com/yoannfleurydev/react-use-disclosure

disclosure hooks modal react react-hooks toggle tooltip

Last synced: 2 months ago
JSON representation

⚛️ Custom React Hook to handle open/close/toggle of a state.

• Host: GitHub
• URL: https://github.com/yoannfleurydev/react-use-disclosure
• Owner: yoannfleurydev
• License: mit
• Created: 2019-11-04T18:49:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2025-02-17T18:22:43.000Z (3 months ago)
• Last Synced: 2025-02-27T21:37:44.506Z (3 months ago)
• Topics: disclosure, hooks, modal, react, react-hooks, toggle, tooltip
• Language: JavaScript
• Homepage:
• Size: 2.51 MB
• Stars: 37
• Watchers: 5
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# useDisclosure

![Node CI](https://github.com/yoannfleurydev/useDisclosure/workflows/Node%20CI/badge.svg)

`useDiclosure` is a React custom hook to perform common open/close behavior on

modals, tooltips etc.

## 🔧 Installation

```sh

# Using yarn.

yarn add react-use-disclosure

# Using npm.

npm install react-use-disclosure

```

## 🔎 Usage

As `useDisclosure` return an object, you can get the key that you want:

```jsx

// At the top of your file.

import { useDisclosure } from "react-use-disclosure";

// Then, in your component.

const {

  isOpen: isModalOpen,

  open: openModal,

  close: closeModal

} = useDisclosure();

const { isOpen: isTooltipOpen, toggle: toggleTooltip } = useDiclosure(true);

// For the example, but the default value is false.

const { isOpen, open, close, toggle } = useDisclosure(false);

```