Если вы, как и я, любите находить в каталоге 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».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
