7つの興味深いReactフック⚛️

この記事では、Reactプロジェクトで試す価値のある7つの興味深いReactフックを紹介します。

1.useSound

useSoundのフックは、私が見つけた最も興味深いフックの1つです。私はブログでこのフックを使用しました—ヘッダーの右上にあるテーマの切り替え[明るい/暗い]アイコンをクリックしたとき。スイッチ音が鳴ります🔊このフックはウェブサイトを1レベル上にノッチします🔥。このフックは、「いいね」ボタンのように、新しい着信メッセージを通知するために使用でき、スクロールにも使用できます。😂

使用法

ライブラリをインストールし、npm install use-sound --saveインポートしますimport useSound from 'use-sound';

例

2.useDarkMode

useDarkModeは、React Recipesのフックの1つです😋このフックは、ウェブサイトテーマのライト☀️モードとダーク🌙モードを切り替えるために提供されます。モードを切り替えた後、選択した値をlocalStorageに保存します。ユーザーが明示的に削除するまで、ユーザーの優先モードはブラウザに記憶されます。

使用法

ライブラリをインストールし、npm install react-recipes --saveインポートしますimport { useDarkMode } from "react-recipes";

例

基本的に、useDarkMode()2つのものを返します。

• darkMode：ダークモードがアクティブなときにtrueになるブール値。
• setDarkMode：ライトモードとダークモードを切り替えます。

useSpeechRecognitionのフックは、ユーザーのマイクから音声のトランスクリプトへのアクセスを提供します。内部でWebSpeech APIを使用します🙌このフックを使用して、独自の音声アシスタントを構築できます🤖

使用法

ライブラリをインストールし、npm install react-speech-recognition --saveインポートしますimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

例

4.useWhyDidYouUpdate

useWhyDidYouUpdateは、それが簡単に再レンダリングするコンポーネントを引き起こしたこと🤔変更された小道具を参照することができます🔁

使用法

🔗フック

例

5.usePrevious

usePreviousフックは内部REFを使用して、以前の値を格納します。このフックは、元に戻すボタンがあるユースケースで使用できます。

使用法

🔗フック

例

6.useOnClickOutside

useOnClickOutsideのフックを外側要素のクリックを検出するために使用され、このフックは、それが開いていたときにドロップダウンを閉じ、モーダル外でクリックされたときにモーダルを閉じるために非常に有用であろう。

使用法

ライブラリをインストールします—npm install use-onclickoutside --saveインポート—import useOnClickOutside from 'use-onclickoutside';

例

7. useTheme

useThemeのフックは、それが簡単に動的にCSS変数を使用して、アプリの外観を変更することができます。これは、styled-componentsやその他のCSS-in-JSフレームワークの軽量な代替手段です。このフックでは、更新が必要なCSS変数のキーと値のペアを含むオブジェクトを渡すだけで、フックはドキュメントのルート要素の各変数を更新します。より興味深い例については、CodeSandboxデモを確認し、スタイルシートも確認してください。

使用法

🔗フック

例

この記事をお読みいただき、ありがとうございます。🙏

plainenglish.ioのその他のコンテンツ