useDisclosure

A hook to manage the open state of a component.

Example

React

import { useDisclosure } from '@fintech-sandpit/ui/react';

const {
  open,
  onOpen,
  onClose,
  onToggle,
} = useDisclosure();

return (
  <div>
    <span>Current state: {open ? 'Open' : 'Closed'}</span>

    <button onClick={onOpen}>Open</button>

    <button onClick={onClose}>Close</button>

    <button onClick={onToggle}>Toggle</button>
  </div>
);

Vue

<script setup lang="ts">
import { useDisclosure } from '@fintech-sandpit/ui/vue';

const {
  open,
  onOpen,
  onClose,
  onToggle,
} = useDisclosure();
</script>

<template>
  <div>
    <span>Current state: {{ open ? 'Open' : 'Closed' }}</span>

    <button @click="onOpen">Open</button>

    <button @click="onClose">Close</button>

    <button @click="onToggle">Toggle</button>
  </div>
</template>