7 interesujących haków React ⚛️

W tym artykule przedstawiam 7 ciekawych hooków Reacta, które warto wypróbować w swoich projektach React.

1. użyj dźwięku

UseSound hak jest jednym z najbardziej interesujących haków znalazłem. Użyłem tego haczyka na moim blogu — po kliknięciu ikony przełączania motywu [jasny/ciemny] w prawym górnym rogu nagłówka. Zabrzmi dźwięk przełącznika 🔊 Ten haczyk przenosi stronę o jeden poziom wyżej 🔥. Ten haczyk może być używany do powiadamiania o nowych wiadomościach przychodzących, do przycisku Like i może być również używany do przewijania. 😂

Stosowanie

Zainstaluj bibliotekę — npm install use-sound --savei importuj —import useSound from 'use-sound';

Przykład

2. użyj DarkMode

UseDarkMode to jeden z haczyków z React Recipes 😋 Ten haczyk umożliwia przełączanie między trybem jasnym ☀️ i ciemnym 🌙 motywu witryny. Po przełączeniu trybu przechowuje wybraną wartość w localStorage. Preferowany tryb użytkownika zostanie zapamiętany w przeglądarce, dopóki użytkownik wyraźnie go nie usunie.

Stosowanie

Zainstaluj bibliotekę — npm install react-recipes --savei importuj —import { useDarkMode } from "react-recipes";

Przykład

Zasadniczo useDarkMode()zwraca dwie rzeczy.

• darkMode : Wartość logiczna, która jest prawdziwa, gdy tryb ciemny jest aktywny.
• setDarkMode : Przełącza pomiędzy trybem jasnym i ciemnym.

UseSpeechRecognition hak daje dostęp do transkrypcji mowy z mikrofonu użytkownika. Wykorzystuje Web Speech API pod maską 🙌 Ten haczyk może być użyty do zbudowania własnego asystenta głosowego 🤖

Stosowanie

Zainstaluj bibliotekę — npm install react-speech-recognition --savei importuj —import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

Przykład

4. użyjWhyDidYouUpdate

UseWhyDidYouUpdate ułatwia zobaczyć, które prop zmieniła 🤔 który spowodował komponent do ponownego renderowania 🔁

Stosowanie

🔗 Hak

Przykład

5. użyjPoprzedni

UsePrevious hak zapamiętuje poprzednie wartości wewnętrznie używając bibl. Ten hak może być używany w przypadku użycia, w którym znajduje się przycisk cofania.

Stosowanie

🔗 Hak

Przykład

6. użyj OnClickOutside

UseOnClickOutside haczyk służy do wykrywania kliknie poza elementu, Hak ten będzie bardzo przydatny do zamykania modalne po kliknięciu poza modalnym, zamykając listę rozwijaną, kiedy jest otwarty.

Stosowanie

Zainstaluj bibliotekę —npm install use-onclickoutside --save Importuj —import useOnClickOutside from 'use-onclickoutside';

Przykład

7. użyj motywu

UseTheme hak ułatwia dynamicznie zmieniać wygląd swojej aplikacji za pomocą zmiennych CSS. Jest to lekka alternatywa dla styled-components lub innego frameworka CSS-in-JS. W tym zaczepie po prostu przekaż obiekt zawierający pary klucz/wartość zmiennych CSS, które wymagają aktualizacji, a zaczep aktualizuje każdą zmienną w elemencie głównym dokumentu. Sprawdź demo CodeSandbox, aby uzyskać ciekawszy przykład, a także sprawdź arkusz stylów.

Stosowanie

🔗 Hak

Przykład

Dziękujemy za poświęcenie czasu na przeczytanie tego artykułu! 🙏

Więcej treści na plainenglish.io