Mantine Hooks ページ

※2023年2月9日現在 Version 5.10.0 Hooksのトップページがない、https://mantine.dev/hooks/が404扱いになっている。

関連ページ

MantineのHooks一覧

状態管理	説明
use-counter	与えられた境界の中で状態を増減させるhookです。
use-debounced-state	値の変更を遅延させるhookです。Reactの状態に基づいて重い操作を実行したい場合などに便利です
use-debounced-value	値の変更を遅延させるhookです。Reactの状態に基づいて重い操作を実行したい場合に便利です。
use-disclosure	モーダル開閉制御などのブール状態を管理するフックです。open、close、toggleハンドラを提供し、オプションのonOpenおよびonCloseコールバックを受け入れます。
use-id	レンダリングを超えて持続するランダムなIDを生成するフックです。このフックは、通常、入力要素をラベルにバインドするために使用されます。生成されたランダムなIDはrefに保存されます。
use-idle	与えられた時間 (ms) の間、ユーザーが何もしなかったかどうかを検出します。
use-input-state	入力値の状態を管理します。ネイティブとカスタム入力の状態。
use-interval	開始インターバル、停止インターバル、トグルインターバル、現在のインターバルステータスを返すオブジェクトを提供します。
use-list-state	ReactのuseStateフックに似たような形式で、配列を1つの引数として受け取り、リストの値とそれらを変更するためのハンドラーをタプルで返す。このフックは、リスト内の値を追加、削除、置き換えなどの操作を行うための関数を提供します。
use-local-storage	localStorageからの値をReactステートとして使用することを可能にします。HookはuseStateと同じように動作しますが、値もlocalStorageに書き込みます。
use-pagination	より柔軟な制御が必要な場合に使用できるフックです。@mantine/hooksからexportされています。ページネーションコンポーネントを作成するために使用できます。
use-previous	開発者がコンポーネントを作成する際に使用できる機能であり、以前のバージョンから変更されたプロパティを取得して再利用することができます。
use-queue	現在の状態のデータ量を制限し、残りのデータをキューに入れる機能です。例えば、@mantine/notificationsパッケージでは、現在の状態にあるデータ量を制限することができます。
use-set-state	クラスコンポーネント内のthis.setStateと同様に動作します。これは、現在の状態に部分的な状態を浅くマージするものです。
use-timeout	指定されたミリ秒後にコールバック関数を呼び出すタイマーを設定するためのAPIです。
use-toggle	与えられた値を切り替えるためのフックです。これは、状態パターンの共通的なパターンを実装します。
use-uncontrolled	制御されるコンポーネントと制御されないコンポーネントの両方の状態を管理することができます。
use-validated-state	状態が設定されるたびに与えられたルールで状態を検証します。それは、現在の検証状態、最後の正しい値、およびエラーメッセージを含むオブジェクトを返します。

UI and Dom	説明
use-click-outside	指定された要素の外側をクリックやタッチイベントを検出した時、何かの処理をしたい場合に便利なhookです。デフォルトでは、use-click-outsideはmousedownとtouchstartイベントを聞き、変更することも可能です。ドロップダウンメニューなどに使います。
use-color-scheme	システムのカラースキームを取得するための関数であり、darkまたはlightの値を返します。
use-element-size	指定した要素の幅と高さを取得します。
use-event-listener	refが割り当てられた要素にイベントリスナーを追加するものです。HookはaddEventListenerメソッドと同じオプションをサポートします。
use-focus-return	指定された条件が満たされたときにフォーカスを最後にフォーカスした要素に自動的に戻す機能です。例えば、モーダルコンポーネントで使用されています。
use-focus-trap	モーダル、ドロワー、メニューなどでフォーカスを特定のノードに固定するためのツールです。少なくとも1つの入力可能な要素を含むノードが必要であり、ノードがアンマウントされたときにフォーカスがリセットされる。
use-focus-within	指定した要素の内部にフォーカスがあるかどうかを検出し真偽値を返すhookです。フォーカスがあたっている時になにかの処理を追加します。
use-fullscreen	Fullscreen APIを使用して、指定された要素に入り/出ることを可能にするものです。デフォルトでは、refを提供しない場合、フックはドキュメントを対象とします。
use-hotkeys	最初の引数としてホットキーとハンドラーのタプルの配列を受け入れます：ホットキー - ホットキー文字列（例：ctrl + E、shift + alt + L、mod + Sなど）。
use-hover	マウスがターゲット要素またはドロップダウン上にあるときにのみ表示されます。ドロップダウン内でアンカーやボタンを使用できますが、入力は推奨されていません。Mantine.uiメニューのホバーカラーを変更するには、CSSを使用します。
use-intersection	Intersection Observer APIを使用して、与えられた要素とスクロールコンテナまたはbody要素との交差情報を取得するMantineのラッパーです。
use-media-query	ブラウザの幅に合わせて変化する機能を追加します。
use-mouse	ビューポートまたは指定された要素からの相対的なマウス位置の取得を取得します。
use-move	任意の要素に対する移動動作を処理します。
use-reduced-motion	コンポーネントがマウントされると、useEffectフックが呼び出されます。ほとんどの場合はこれで問題ありませんが、値の変更を追跡する必要がある場合は、マウント時にuseEffectが呼ばれないようにするために、サンプルのような実装が必要になります。
use-resize-observer	コンポーネントのリサイズを検知するhookです。幅と高さと要素の位置を取得します。
use-scroll-into-view	任意の可スクロール要素のスクロール動作を処理します。基本的な使用方法は、element.scrollIntoView()と同じです。
use-scroll-lock	document.body overflowをhiddenに設定して現在の位置でスクロールをロックする機能です。スクロールをロックします。
use-viewport-size	リサイズとオリエンテーションチェンジイベントを購読し、SSR時には{width: 0, height: 0}を返すフックです。

Utilities	説明
use-clipboard	navigator.clipboardを操作するためのインターフェイスを提供します。
use-document-title	文書タイトルを設定するために使用されます。値が変更され、かつ空文字列でない場合にフックがトリガーされます。
use-document-visibility	現在のタブがアクティブかどうかを検出するために使用されるhookであり、document.visibilityStateを返します。
use-eye-dropper	カーソル上の色を選択できます。
use-favicon	ファビコンを切り替えるためのhookです。コンポーネント内でfaviconとして設定する必要があるfavicon URL（サポートされているフォーマット：.ico、.png、.svg、.gif）を渡すためのhookです。URLが変更されるたびにhookがトリガーされます。
use-hash	URLからハッシュ値を取得したり、ハッシュ変更イベントに購読したり、ハッシュを設定したりすることができるツールです。
use-merged-ref	複数のrefを使用する必要がある場合に使用するフックです。これは、domノードに渡される関数を返します。
use-network	ネットワーク接続の状態を取得するためのJavaScriptフックであり、オンライン/オフラインの状態を取得したり、RTT（Round Trip Time）やダウンリンクなどの情報を取得することができます。
use-os	ユーザーのOSを検出するためのツールであり、可能な値はundetermined、macos、ios、windows、android、linuxです。
use-page-leave	マウスがページから離れたときに指定した関数を呼び出すものです。
use-text-selection	現在のテキスト選択を返すフックであり、テキスト選択を無効にすることができます。例えば、ユーザビリティのために、テキスト選択を無効にすることが望ましい場合があります。
use-window-event	コンポーネントマウント時にウィンドウへのイベントリスナーを追加し、アンマウント時に削除するものです。
use-window-scroll	現在のスクロール位置を返し、指定された位置にスムーズにスクロールする関数を提供する。

Lifecycle	説明
use-did-update	コンポーネントがマウントされると、useEffectフックが呼び出されます。ほとんどの場合はこれで問題ありませんが、値の変更を追跡する必要がある場合は、マウント時にuseEffectが呼ばれないようにするために、サンプルのような実装が必要になります。
use-force-update	状態変更なしにコンポーネントを再レンダリングするための関数であり、関数を呼び出すとコンポーネントが再レンダリングされる。
use-isomorphic-effect	サーバーサイドレンダリング中にuseEffectを使用し、水平後にuseLayoutEffectを使用することを可能にします。どこでも使用できます。
use-logger	コンポーネントがレンダリングされるたびに与えられた値をコンソールに記録します。開発ツールを使用してコンソール内の状態変化を確認できます。
use-shallow-effect	参照比較ではなく、浅い依存関係の比較を行うuseEffectと同じように機能します。

Mantineとは？

ReactのUIコンポーネントライブラリで、120種類以上の豊富なコンポーネントとHooksを提供しています。
使いやすさ、アクセシビリティ、開発者体験を重視したネイティブなダークテーマサポートを備えています。
ドキュメントがわかりやすく、Componentの種類が多く、アップデートの頻度が速いなどかなり優れたUIライブラリであると評価されています。

perplexityで調査

この記事はAIを用いた質問応答サービス

を利用して調査しました。
一度に全てのHooksを調査することはまだ不可能でしたので、それぞれ個別に検索・調査しました。

perplexityAI について日本語で答えてください。

Perplexity.aiは、AIを用いた質問応答サービスで、日本語にも対応している[1]。Perplexityとは、ある事象に対して、別の事象が発生した際の頻度（確率）を対数を組み合わせて表す機械学習の指標である[1]。

[1]

mantineの公式サイト

Mantine関連の便利なサイト

mantineの派生サイト？？？
公式にもリンクはみつからず、独自のサイトか？