---
title: フック
description: "Yamada UIには、プロジェクトをより迅速に構築できるように便利なカスタムフックが用意されています。"
---

## 使い方

Yamada UIは、2つの方法でフックを提供しています。1つは、[CLI](https://yamada-ui.com/docs/components/cli.md)からフックをローカルにダウンロードする新しい方法。もう1つは、モジュールからフックをインポートする従来通りの方法です。

### ダウンロード

[CLI](https://yamada-ui.com/docs/components/cli.md)からフックをローカルにダウンロードするケースは、以下のものが考えられます。

- フックの初期値またはロジックをカスタマイズする。
- フックのロジックに不具合があり、直接修正する。

```bash
pnpm yamada-cli add use-disclosure
```

```bash
npm yamada-cli add use-disclosure
```

```bash
yarn yamada-cli add use-disclosure
```

```bash
bun yamada-cli add use-disclosure
```

:::note
Yamada UIがフックを更新した場合は、[コンポーネントを更新する](https://yamada-ui.com/docs/components/cli.md#コンポーネントを更新する)と同様に簡単に更新することができます。もし、あなたの修正と競合しても[Git](https://git-scm.com)の[競合の提示方法](https://git-scm.com/docs/git-merge#_how_conflicts_are_presented)と同じように表示され、簡単に解決することができます。
:::

### インポート

フックに何も変更することなく使用する場合は、モジュールからフックをインポートするだけです。

```tsx
import { useDisclosure } from "@yamada-ui/react"
```

```tsx
import { useDisclosure } from "@/components/ui"
```

```tsx
import { useDisclosure } from "@workspaces/ui"
```

## フック

ライブラリで利用可能なすべてのフックのリストはこちらです。

- [useAnimation](https://yamada-ui.com/docs/hooks/use-animation.md)
- [useAsync](https://yamada-ui.com/docs/hooks/use-async.md)
- [useAsyncCallback](https://yamada-ui.com/docs/hooks/use-async-callback.md)
- [useBoolean](https://yamada-ui.com/docs/hooks/use-boolean.md)
- [useBreakpoint](https://yamada-ui.com/docs/hooks/use-breakpoint.md)
- [useBreakpointEffect](https://yamada-ui.com/docs/hooks/use-breakpoint-effect.md)
- [useBreakpointState](https://yamada-ui.com/docs/hooks/use-breakpoint-state.md)
- [useBreakpointValue](https://yamada-ui.com/docs/hooks/use-breakpoint-value.md)
- [useClipboard](https://yamada-ui.com/docs/hooks/use-clipboard.md)
- [useColorMode](https://yamada-ui.com/docs/hooks/use-color-mode.md)
- [useColorModeValue](https://yamada-ui.com/docs/hooks/use-color-mode-value.md)
- [useCounter](https://yamada-ui.com/docs/hooks/use-counter.md)
- [useDescendants](https://yamada-ui.com/docs/hooks/use-descendants.md)
- [useDisclosure](https://yamada-ui.com/docs/hooks/use-disclosure.md)
- [useDynamicAnimation](https://yamada-ui.com/docs/hooks/use-dynamic-animation.md)
- [useEyeDropper](https://yamada-ui.com/docs/hooks/use-eye-dropper.md)
- [useFocusOnShow](https://yamada-ui.com/docs/hooks/use-focus-on-show.md)
- [useFormatByte](https://yamada-ui.com/docs/hooks/use-format-byte.md)
- [useFormatDateTime](https://yamada-ui.com/docs/hooks/use-format-date-time.md)
- [useFormatNumber](https://yamada-ui.com/docs/hooks/use-format-number.md)
- [useHover](https://yamada-ui.com/docs/hooks/use-hover.md)
- [useIdle](https://yamada-ui.com/docs/hooks/use-idle.md)
- [useInfiniteScroll](https://yamada-ui.com/docs/hooks/use-infinite-scroll.md)
- [useInterval](https://yamada-ui.com/docs/hooks/use-interval.md)
- [useLoading](https://yamada-ui.com/docs/hooks/use-loading.md)
- [useLocalStorage](https://yamada-ui.com/docs/hooks/use-local-storage.md)
- [useMediaQuery](https://yamada-ui.com/docs/hooks/use-media-query.md)
- [useNotice](https://yamada-ui.com/docs/hooks/use-notice.md)
- [useOs](https://yamada-ui.com/docs/hooks/use-os.md)
- [useOutsideClick](https://yamada-ui.com/docs/hooks/use-outside-click.md)
- [usePrevious](https://yamada-ui.com/docs/hooks/use-previous.md)
- [useProcessing](https://yamada-ui.com/docs/hooks/use-processing.md)
- [usePromiseDisclosure](https://yamada-ui.com/docs/hooks/use-promise-disclosure.md)
- [useResizeObserver](https://yamada-ui.com/docs/hooks/use-resize-observer.md)
- [useTheme](https://yamada-ui.com/docs/hooks/use-theme.md)
- [useTimeout](https://yamada-ui.com/docs/hooks/use-timeout.md)
- [useUpdateBreakpointEffect](https://yamada-ui.com/docs/hooks/use-update-breakpoint-effect.md)
- [useUpdateEffect](https://yamada-ui.com/docs/hooks/use-update-effect.md)
- [useValue](https://yamada-ui.com/docs/hooks/use-value.md)
- [useWindowEvent](https://yamada-ui.com/docs/hooks/use-window-event.md)