5 маленьких, но полезных библиотек React

0
1
views

Если вы, как и я, любите находить в каталоге NPM изюминки, способные улучшить ваш процесс разработки, то сегодня ваш счастливый день. Я расскажу вам о нескольких небольших малоизвестных библиотеках, которые я нашел и теперь использую ежедневно. Они избавят вас от многих приступов головной боли.

Итак, давайте начнем!

1. Urlcat

Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки.

Да, для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, чтобы просто создать URL.

Вот почему я люблю эту библиотеку. Вы ее подключаете, и она просто работает. Не нужно изучать сложные шаблоны или тратить часы на документацию.

Так что смело пробуйте: https://github.com/balazsbotond/urlcat.

2. UseHooks-ts

Если вы React-разработчик, то вы используете хуки (по крайней мере, я на это надеюсь). А раз так, то вам, вероятно, часто приходится создавать пользовательские хуки для всяких мелочей. Например, для обработки темного режима или для события изменения размера окна.

UseHooks — это небольшая библиотека с хорошо написанными, задокументированными и полностью типизированными (для пользователей TypeScript) хуками для всех этих вещей. Использование этой библиотеки позволит вам не отвлекаться на мелочи и сосредоточиться на самом проекте.

Ознакомиться с библиотекой можно здесь: https://github.com/juliencrn/usehooks-ts.

3. Logt

Я люблю, чтобы логи были везде, чтобы когда мне понадобится узнать, что происходит, я мог их проверить.

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

  • логи должны быть полностью типизированными (чтобы я мог использовать их в Typescript без лишней мороки)
  • они должны быть небольшими
  • у логов должны быть цветные ярлыки (чтобы я мог быстро определить тип лога)
  • мне нужны разные уровни логов
  • должна быть возможность скрывать некоторые логи в зависимости от условий (например, в продакшен-сборке)
  • должна быть возможность отправлять эти логи куда-то еще (например, в Sentry).

После долгих поисков подходящей библиотеки (и почти начав писать собственную), я нашел Logt, которая отвечает всем моим требованиям.

Рекомендую на 100%! https://github.com/sidhantpanda/logt.

4. Loadable Components

Если вы пытаетесь оптимизировать ваше приложение на React, вы, вероятно, используете React.lazy и Suspense для ленивой загрузки компонентов.

Это хорошо.

Но есть способы еще лучше! Например, библиотека Loadable Components. Очевидно, что в этой статье я не могу подробно объяснить, почему стоит перейти с React.lazy на эту библиотеку. Если интересно, вот отдельная статья на эту тему.

Несколько ключевых моментов: она поддерживает SSR (рендеринг на стороне сервера), Library Splitting (разделение библиотеки) и даже полный динамический импорт. Неплохо, да?

И самое главное. Библиотека действительно проста в использовании. Почти plug-and-play. Так что попробуйте! https://github.com/gregberge/loadable-components.

5. Emoji Mart

Работая над различными проектами, мне часто приходится иметь дело с эмодзи. Они сейчас используются повсеместно. И обычно мне приходится добавлять в проект какой-нибудь компонент для выбора эмодзи.

Это несложно. Но затем вы начинаете получать больше требований: он должен загружать эмодзи лениво, поддерживать интернационализацию, обеспечивать поиск, позволять использовать тот же текст запроса, что и Slack…

А это требует времени. Я могу это сделать. Но клиенты обычно предпочитают, чтобы я сосредоточился на самом проекте. Так что… я нашел эту маленькую библиотеку. Красивую и полезную.

Позвольте вам представить Emoji Mart! https://github.com/missive/emoji-mart.

Все библиотеки, которые мы рассмотрели в этой статье, довольно полезные и при том маленькие, простые в использовании и идеально подходящие для интеграции в ваши проекты. Убедитесь сами!

Перевод статьи «5 Small and Hidden React libraries You Should Already Be Using».

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here