15 полезных кастомных хуков React

React.js
15 полезных кастомных хуков React

React предоставляет функцию пользовательских хуков, мы можем создать много интересных функций на основе этой функции, сегодня я поделюсь некоторыми хуками, которые я считаю неплохими, всего их 15.

Если вы не особенно знакомы с React Hooks, вы можете сначала прочитать эту статью:React Hooks Извлеките уроки из прошлого

useClippy

useClippyэто пользовательский хук для чтения или записи в монтажный стол, поддерживает TypeScript.

Официальная документация:GitHub.com/Чарльз Сент о в…

Пример кода:

import useClippy from 'use-clippy';

export default () => {
  const [clipboard, setClipboard] = useClippy();

  return (
    <div>
      <button
        onClick={() => {
          alert(`粘贴板内容为: ${clipboard}`);
        }}
      >
        读取粘贴板
      </button>
      <button
        onClick={() => {
          setClipboard(`新内容: ${Math.random()}`);
        }}
      >
        写入粘贴板
      </button>
    </div>
  );
};

useWindowSize

useWindowSizeИспользуется для получения размера окна браузера, нажатие по умолчаниюdebounceконечно, его также можно получитьthrottledспособ получения.

Официальная документация:GitHub.com/Джаред Лун/…

Пример кода:

import { useWindowSize } from '@react-hook/window-size';
// import { useWindowSize } from '@react-hook/window-size/throttled';

export default (props) => {
  const [width, height] = useWindowSize();

  return (
    <div>
      width: {width}, height: {height}
    </div>
  );
};

useMediaQuery

useMediaQueryиспользуя в компонентеCSS3 Media Queryдля управления компонентом.

Официальная документация:GitHub.com/Джаред Лун/…

Пример кода:

import React from 'react';
import { useMediaQuery, useMediaQueries } from '@react-hook/media-query';

// Using a single media query
// export default () => {
//   const matches = useMediaQuery('only screen and (min-width: 400px)');
//   return `Matches? ${matches ? 'Matched!' : 'Nope'}`;
// };

// Using multiple media queries
export default () => {
  const { matches, matchesAny, matchesAll } = useMediaQueries({
    screen: 'screen',
    width: '(min-width: 400px)',
  });

  return (
    <ul>
      <li>Screen matched? {matches.screen ? 'Yes' : 'No'}</li>
      <li>Width matched? {matches.width ? 'Yes' : 'No'}</li>
      <li>All matched? {matchesAll ? 'Yes' : 'No'}</li>
      <li>Any matched? {matchesAny ? 'Yes' : 'No'}</li>
    </ul>
  );
};

useAsync

useAsyncИспользуется для корректного разрешения, отмены и обработки асинхронных функций или обещаний, а также для их автоматической очистки при размонтировании компонента.

Официальная документация:GitHub.com/Джаред Лун/…

Пример кода:

import { useAsync } from '@react-hook/async';

export default () => {
  const [{ status, cancel, error, value }, call] = useAsync(() => {
    return new Promise((resolve) => setTimeout(() => resolve('Loaded'), 3000));
  });

  switch (status) {
    case 'loading':
      return (
        <div>
          <button onClick={cancel}>Cancel</button>
          Loading...
        </div>
      );
    case 'cancelled':
      return (
        <div>
          Cancelled.
          <button onClick={call}>Try again</button>
        </div>
      );
    case 'error':
      return `Error: ${error}`;
    case 'success':
      return value || 'Success!';
    default:
      return <button onClick={call}>Load me</button>;
  }
};

useBrowserContextCommunication

useBrowserContextCommunicationиспользоватьBroadcast Channel APIПредоставляет простое решение для связи между различными контекстами браузера (вкладки, фреймы, окна).

Официальная документация:Github.com/avr aa mm av день ...

Пример кода:

import useBrowserContextCommunication from 'react-window-communication-hook';

export default () => {
  // communicationState 是一个 {lastMessage, messages} 对象，用于从其它的浏览器上下文接收数据
  const [communicationState, postMessage] = useBrowserContextCommunication(
    'channel'
  );

  const [status, setStatus] = useState('login');

  function logout() {
    setStatus('logout');
    postMessage('logout');
  }

  const isLogout = [communicationState.lastMessage, status].includes('logout');

  return (
    <div>
      <h1>状态：{isLogout ? '已退出' : '已登录'}</h1>
      <button onClick={logout}>退出</button>
    </div>
  );
};

Вы можете открыть две вкладки в браузере, а затем нажать кнопку «Выход» на одной из страниц, и вы обнаружите, что страницы обеих вкладок изменились.

useScript

useScriptдля динамической загрузки внешних скриптов и предоставляетonLoadОбратный вызов используется для получения времени завершения загрузки скрипта.

Официальная документация:GitHub.com/HooperRussian1980/Горячие…

Пример кода:

import { StripeProvider } from 'react-stripe-elements';
import useScript from 'react-script-hook';

export default () => {
  const [loading, error] = useScript({ src: 'https://js.stripe.com/v3/' });

  if (loading) return <h3>Loading Stripe API...</h3>;
  if (error) return <h3>Failed to load Stripe API: {error.message}</h3>;

  return (
    <StripeProvider apiKey="pk_test_6pRNASCoBOKtIshFeQd4XMUh">
      <div>Hello</div>
    </StripeProvider>
  );
};

Конечно, его также можно использовать в виде функции обратного вызова:

useScript({ 
  src: 'https://js.stripe.com/v3/',
  onload: () => console.log('Script loaded!') 
})

useLocalStorage

useLocalStorageраньше проходилlocalStorage APIдоступ к данным.

Официальная документация:GitHub.com/Re hooks/Великолепная…

Пример кода:

import { useLocalStorage, writeStorage } from '@rehooks/local-storage';

let counter = 0;

export default () => {
  const [counterData] = useLocalStorage('counter');

  return (
    <>
      {counter}
      <button onClick={() => writeStorage('counter', ++counter)}>Write</button>
      <button onClick={() => alert(counterData)}>Read</button>
    </>
  );
};

useIdb

useIdbс помощью браузераIndexedDBдля хранения данных, сuseLocalStorageаналогичный.

Официальная документация:GitHub.com/Anti-IG iDay/Горячее питание…

Пример кода:

import { useIdb } from 'react-use-idb';

export default () => {
  const [value, setValue] = useIdb('my-key', 'foo');

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue('bar')}>bar</button>
      <button onClick={() => setValue('baz')}>baz</button>
    </div>
  );
};

use-mouse-action

use-mouse-actionИспользуется для прослушивания событий щелчка, когда мышь (и, возможно, сенсорная панель) нажимается или поднимается.

Официальная документация:Github.com/dimitri ico ...

Пример кода:

import useMouseAction from 'use-mouse-action';

export default () => {
  const props = useMouseAction({
    onAction: () => console.log('You clicked or mouse downed me!'),
    down: true,
  });

  return (
    <button type="button" {...props}>
      Click me fast!
    </button>
  );
};

useDebounce

useDebounceза задержкуsetStateИли выполнение других функций обратного вызова.

Официальная документация:GitHub.com/Джаред Лун/…

Пример кода:

import {useDebounce, useDebounceCallback} from '@react-hook/debounce'

const Component = (props) => {
  // at a basic level, used just like useState
  const [value, setValue] = useDebounce('initialValue')
}

const useMyCallback = (initialState, wait, leading) => {
  // this is the same code useDebounce() uses to debounce setState
  const [state, setState] = useState(initialState)
  return [state, useDebounceCallback(setState, wait, leading)]
}

useThrottle

useThrottleдля разбавленияsetStateИли частота выполнения других функций обратного вызова.

Официальная документация:GitHub.com/Джаред Лун/…

Пример кода:

import {useThrottle, useThrottleCallback} from '@react-hook/throttle'

const Component = (props) => {
  // at a basic level, used just like useState
  const [value, setValue] = useThrottle('initialValue')
}

const useMyCallback = (initialState, fps, leading) => {
  // this is the same code useThrottle() uses to throttle setState
  const [state, setState] = useState(initialState)
  return [state, useThrottleCallback(setState, fps, leading)]
}

useOnlineStatus

useOnlineStatusИспользуется для получения текущего состояния сети, внутренне отслеживаяonlineа такжеofflineРеализация события.

Официальная документация:GitHub.com/Re hooks/о, где…

Пример кода:

import useOnlineStatus from '@rehooks/online-status';

export default () => {
  const onlineStatus = useOnlineStatus();
  return (
    <div>
      <h1>You are {onlineStatus ? 'Online' : 'Offline'}</h1>
    </div>
  );
};

useDocumentTitle

useDocumentTitleИспользуется для обновления заголовка страницы.

Официальная документация:GitHub.com/Re hooks/doc…

Пример кода:

import useDocumentTitle from '@rehooks/document-title';

export default () => {
  useDocumentTitle('Page Title');
  return <div />;
};

useNetworkStatus

useNetworkStatusнезащищенныйnavigator.connectionОбъект для получения статуса сети в режиме реального времени.

Официальная документация:GitHub.com/Re hooks/net…

Пример кода:

import useNetworkStatus from '@rehooks/network-status';

export default () => {
  let connection = useNetworkStatus();
  return (
    <div>
      <div>downlink: {connection.downlink}</div>
      <div>effectiveType: {connection.effectiveType}</div>
      <div>rtt: {connection.rtt}</div>
      <div>saveData: {connection.saveData ? 'yes' : 'no'}</div>
    </div>
  );
};

useSpeechSynthesis

useSpeechSynthesisиспользуяWeb Speech APIОбеспечивает распознавание речи и преобразование текста в речь, а также может распознавать китайский и английский языки.

Официальная документация:Эй, эта лошадь плюс .com/package/hot...Онлайн пример:M может parton.GitHub.IO/react-SPE EC…

Пример кода:

import { useSpeechSynthesis, useSpeechRecognition } from 'react-speech-kit';

export default () => {
  const [value, setValue] = useState('');
  const { speak } = useSpeechSynthesis();

  const { listen, listening, stop } = useSpeechRecognition({
    onResult: (result) => {
      setValue(result);
    },
  });

  return (
    <div>
      <textarea
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <br />
      <button onMouseDown={listen} onMouseUp={stop}>
        Listen
      </button>
      <button onClick={() => speak({ text: value })}>Speak</button>

      {listening && <div>Go ahead I'm listening</div>}
    </div>
  );
};

можно удерживатьListenПросто удерживайте кнопку и скажите слово, оно автоматически распознает и введет его в текстовое поле, а затем нажмитеSpeakкнопку, он автоматически распознает содержимое в текстовом поле и воспроизведет его голосом.

Категории