10 лучших библиотек React Hook, которые вы можете порекомендовать

React.js

10 лучших библиотек React Hook

  • Оригинальный адрес: https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065
  • Оригинальный автор: Юрай Павлович
  • Переводчик: Пей Гесин (Солнце солнечное)

React Hooks уже здесь и штурмуют сообщество React. Прошло много времени с момента первоначального выпуска, а это значит, что существует множество библиотек поддержки. При поиске чего-либо, связанного с React, трудно не увидеть термин «крючок». Если вы еще этого не сделали, вам следует как можно скорее добавить их в кодовую базу. Они сделают вашу жизнь программиста проще и приятнее.

При разработке React критически важно поддерживать чистый стиль кода, удобочитаемость, ремонтопригодность, меньшее количество строк кода и возможность повторного использования. Этот блог покажет вам, что нужно начинать прямо сейчас10 лучших библиотек React Hook. Без дальнейших промедлений, давайте начнем.

1.use-http

use-http— очень полезная библиотека, которую можно использовать в качестве альтернативы Fetch API. Это упрощает понимание вашего кода, точнее, части обработки данных.use-httpИзначально использует TypeScript и даже поддерживает SSR и GraphQL. Он возвращает ответ, загрузку, данные об ошибках и различные методы запроса, такие как Get, Post, Put, Patch и Delete.

Основные функции, которые он обеспечивает:

  • перехватчик запроса/ответа
  • Пауза (в настоящее время экспериментальная)
  • функция ретрансляции
  • тайник

Это хорошо задокументировано в примере CodeSandbox, видео на Youtube и файле readme на GitHub.

Пример использования:

import useFetch from "use-http"

const Example = () => {
  const [todos, setTodos] = useState([])
  const { get, post, response, loading, error } = useFetch("https://example.com")

  useEffect(() => { get("/todos") }, [])

  const addTodo = async () => {
      await post("/todos", { title: "example todo" });
      if (response.ok) setTodos([...todos, newTodo])
  }

  return (
    <>
      <button onClick={addTodo}>Add Todo</button>
      {error && 'Error!'}
      {loading && 'Loading...'}
      {todos.map(todo => (
        <span key={todo.id}>{todo.title}</span>
      )}
    </>
  );
};

2. useMedia

Вам нужен способ отслеживать медиа-запросы CSS? useMedia предлагает простое решение этой проблемы. Это сенсорный крючок, который точно отслеживает. В любом приложении или веб-сайте медиа-запросы, а также скорость отклика очень важны.

Он написан на TypeScript. Пакет имеет четко определенную документацию, и его использование и методы тестирования очень хорошо объяснены.

Пример использования:

import useMedia from 'use-media';

const Example = () => {
  const isWide = useMedia({minWidth: '1000px'});

  return (
    <span>
      Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"}
    </span>
  );
};

3.Constate

Constate продвигает локальное состояние в React Context. Это означает, что любое состояние любого компонента можно легко преобразовать в контекст с минимальными усилиями. Это полезно, если вы хотите использовать одно и то же состояние в нескольких местах или предоставить одно и то же состояние для нескольких компонентов. Название происходит от слиянияConтекст иstate. Он реализован на основе машинописного текста, а библиотека очень маленькая. Хотя документация не очень подробная, мы можем легко научиться ее использовать, глядя на примеры.

Пример использования:

import React, { useState } from "react";
import constate from "constate";

// custom hook
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
}

// hook passed in constate
const [CounterProvider, useCounterContext] = constate(useCounter);

function Button() {
  // use the context
  const { increment } = useCounterContext();
  return <button onClick={increment}>+</button>;
}

function Count() {
  // use the context
  const { count } = useCounterContext();
  return <span>{count}</span>;
}

function App() {
  // wrap the component with provider
  return (
    <CounterProvider>
      <Count />
      <Button />
    </CounterProvider>
  );

4. Redux hooks

Redux — хорошо известный инструмент для многих, если не для всех, разработчиков React. Во всем приложении он служит глобальным менеджером состояний. Он появился с крючками через несколько месяцев после первоначального выпуска React. Он предоставляет альтернативу шаблону HOC (компонент высшего порядка), используя существующий метод connect().

Самые известные предлагаемые крючки:

  • useSelector
  • useDispatch
  • useStore

Документация довольно хорошая и немного сложная, но она даст вам любую информацию, необходимую для начала работы с ними.

Пример использования:

import  {useSelector, useDispatch} from "react-redux";
import * as actions from "./actions";

const Example = () => {
const dispatch = useDispatch()
const counter = useSelector(state => state.counter)

return (
<div>
   <span>
     {counter.value}
   </span>
   <button onClick={() => dispatch(actions.incrementCounter)}>
     Counter +1
   </button>
</div>
);
};

5. React hook form

React hook formэто библиотека хуков форм, похожая на формы Formik и Redux, но лучше! Благодаря более простому синтаксису, скорости, меньшему количеству повторных рендеров и лучшей ремонтопригодности он начинает подниматься по лестнице GitHub. Он небольшой и создан с учетом производительности. Библиотека даже предоставляет потрясающий конструктор форм! У него одна из самых высоких звезд GitHub (14,8 тыс.) в библиотеке хуков React.

Пример использования:

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    // logs {firstName:"exampleFirstName", lastName:"exampleLastName"}
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstName" ref={register} />
      <input name="lastName" ref={register({ required: true })} />
      {errors.lastName && <span>"Last name is a required field."</span>}
      <input name="age" ref={register({ required: true })} />
      {errors.age && <span>"Please enter number for age."</span>}
      <input type="submit" />
    </form>
  );
}

6. useDebounce

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

Пример использования:

import React, { useState } from "react";
import { useDebounce } from "use-debounce";

export default function Input() {
  const [text, setText] = useState("Hello");
  const [value] = useDebounce(text, 1000);

  return (
    <div>
      <input
        defaultValue={"Hello"}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Value: {text}</p>
      <p>Debounced value: {value}</p>
    </div>
  );
}

7. useLocalStorage

useLocalStorage — это небольшой хук, такой же, как и выше. Это полезно для получения и установки данных в localStorage. Операция становится легкой после его использования.

Обеспечивает автоматическую сериализацию и синхронизацию JSON.

Документация написана качественно и полностью понятно с развернутыми примерами.

Пример использования:

import React, { useState } from "react";
import { writeStorage } from '@rehooks/local-storage';

export default function Example() {
  let counter = 0;
  const [counterValue] = useLocalStorage('counterValue');

  return (
    <div>
      <span>{counterValue}</span>
      <button onClick={() => writeStorage('i', ++counter)}>
        Click Me
      </button>
    </div>
  );
}

8. usePortal

usePortal позволяет очень легко создавать раскрывающиеся меню, всплывающие слои, всплывающие уведомления, подсказки и многое другое! Он предоставляет возможность создавать элементы вне иерархии DOM приложения.

Он также предлагает полную настройку стилей портала и множество других опций.

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

Пример использования:

import React, { useState } from "react";
import usePortal from "react-useportal";

const Example = () => {
    const { ref, openPortal, closePortal, isOpen, Portal } = usePortal()

    return (
      <>
         <button ref={ref} onClick={() => openPortal()}>
            Open Portal
         </button>
          {isOpen && (
            <Portal>
              <p>
                This Portal handles its own state.{' '}
                <button onClick={closePortal}>Close me!</button>, hit ESC or
                click outside of me.
              </p>
            </Portal>
          )}
       </>
 )
}

9. useHover

Он определяет, находится ли он в элементе React HOVER. Это простой в использовании. Эта библиотека небольшая, простая в использовании, но если у вас достаточно творчества, она может быть очень мощной.

Он также предоставляет функцию задержки для эффектов наведения. Поддерживается TypeScript. Хотя документация не такая подробная, она покажет вам, как правильно ее использовать.

Пример использования:

import useHover from "react-use-hover";

const Example = () => {
  const [isHovering, hoverProps] = useHover();
  return (
    <>
      <span {...hoverProps} aria-describedby="overlay">Hover me</span>
      {isHovering ? <div> I’m a little tooltip! </div> : null}
    </>
  );
}

10. React router hooks

React router — одна из самых популярных библиотек для React. Он используется для маршрутизации и получения истории URL-адресов приложений и т. д. Он реализован с помощью Redux для получения таких полезных данных.

Предусмотрены крючки:

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

Его название говорит само за себя. UseHistory получит данные для истории приложений и методов, таких как отправка нового маршрута. UseLocation вернет объект, представляющий текущий URL-адрес. UseParams вернет объект пар параметров ключ-значение для текущего URL-адреса. Наконец, useRouteMatch попытается сопоставить текущий URL-адрес с заданным URL-адресом, который может быть строкой или объектом с различными параметрами.

Документация хорошая, примеров написано много

Пример использования:

import { useHistory, useLocation, useRouteMatch } from "react-router-dom";

const Example = () => {
let history = useHistory();
let location = useLoction();
let isMatchingURL = useRouteMatch("/post/11");

function handleClick() {
history.push("/home");
}

return (
    <div>
        <span>Current URL: {location.pathname}</span>
        {isMatchingURL ? <span>Matching provided URL! Yay! </span> : null}
        <button type="button" onClick={handleClick}>
            Go home
        </button>
</div>
);
}

Есть еще много библиотек хуков, но я решил рассказать именно об этих. Пожалуйста, попробуйте, обещаю, вы не пожалеете. Если они вам действительно нравятся, пожалуйста, поддержите их любым способом. Хуки все еще являются относительно новым способом сделать это. Мы надеемся, что в течение следующих нескольких месяцев появится больше замечательных примеров библиотек и хуков.

Надеюсь, вам была интересна эта статья, и вы узнали что-то новое. Получайте удовольствие, исследуя дополнительные крючки! Удачного развития.

Официальный аккаунт: закулисный ответ и группа "Front-end Sunshine", добро пожаловать на обмен технологиями с большими парнями.

В этой статье используетсяmdniceнабор текста

Категории