d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
39 lines
883 B
Plaintext
39 lines
883 B
Plaintext
import { HookValues } from "@/components/HookValues"
|
|
import { ComponentExample } from "@/components/ComponentExample"
|
|
|
|
export const metadata = {
|
|
title: `useToggleState`,
|
|
}
|
|
|
|
# {metadata.title}
|
|
|
|
This hook tracks a boolean value and toggles between its two states.
|
|
|
|
This guide explains how to use the `useToggleState` hook.
|
|
|
|
For example, you can use this hook to display a checkbox or a [Switch](../../components/switch/page.mdx) that toggles a [Focus Modal](../../components/focus-modal/page.mdx).
|
|
|
|
<ComponentExample name="use-toggle-state-demo" hideFeedback />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { useToggleState } from "@medusajs/ui"
|
|
```
|
|
|
|
```tsx
|
|
const [state, open, close, toggle] = useToggleState()
|
|
```
|
|
|
|
---
|
|
|
|
## API Reference
|
|
|
|
### useToggleState Parameters
|
|
|
|
<HookValues hook="useToggleStateProps" />
|
|
|
|
### useToggleState Return Value
|
|
|
|
<HookValues hook="useToggleStateReturn" hideFeedback />
|