Авторизоваться
Аким Солянкин 02.01.2022 Опубликована

5 потрясающих библиотек для использования в вашем следующем проекте ReactJs 

Все мы знаем, что Reactjs - это UI-библиотека, с помощью которой мы можем быстро создавать пользовательские интерфейсы. Но экосистема Reactjs настолько богата, что вы можете создавать динамические интерактивные веб-приложения, просто используя некоторые внешние библиотеки.

В этом посте мы обсудим 5 библиотек Reactjs, которые вы можете использовать в своем следующем проекте. Мы обсудим варианты его использования и то, как он может помочь вам построить следующий проект без каких-либо сбоев.

Вот список библиотек, которые мы собираемся обсудить

  1. React Flow
  2. React Markdown
  3. Code Mirror
  4. React Draft WYSIWYG
  5. React tippy

Давайте начнем.

React Flow

React flow - это библиотека для создания приложений на основе node, созданная webkid.io.

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

Допустим, вы хотите создать приложение, в котором вы хотите отображать диаграммы/поток узлов, которые могут быть любыми, от статических до динамических.
Здесь мы можем использовать react flow для рендеринга диаграмм/потоков узлов, и конечный пользователь может настроить его, может добавить новый узел, может обновить существующий узел и удалить существующий узел.

Зачем использовать React Flow поверх других библиотек

  • настраиваемый
  • богат утилитами
  • типы поддержки
  • быстрый рендеринг
  • и многое другое

Живой пример

Вот живой пример открытых метаданных - Единого места для поиска, совместной работы и правильной обработки ваших данных, которое использует React flow для визуализации происхождения сущностей.

React Markdown

React markdown - это компонент реакции анализатора markdown, который может принимать markdown строки и отображать ее в элементе react.

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

Для этой библиотеки может быть множество вариантов использования, допустим, вы создаете приложение для блога, и контент будет иметь разметку, поэтому вы можете использовать react markdown для анализа контента.

Все мы хотя бы раз использовали GitHub или подобное приложение на пути к разработке и знаем, что большая часть содержимого находится в формате markdown. Так что мы также можем создать инструмент, используя React Markdown, для создания профиля readme GitHub.

Зачем использовать React Markdown по сравнению с другими библиотеками

  • Легко использовать
  • Богатая поддержка API
  • Поддержка компонентов Custome
  • Возможность расширения с помощью системы плагинов

Живой пример

Здесь вы можете увидеть, что я создал средство предварительного просмотра markdown, используя React Markdown. Вы можете написать markdown и просмотреть выходные данные рядом, также вы можете скачать его как файл markdown.

Code Mirror

Code Mirror - это текстовый редактор с поддержкой разных языков и надстроек для реализации усовершенствования и расширения существующей функциональности.

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

Предположим, вы создаете LMS (систему управления обучением) и хотите предоставить конечным пользователям редактор для редактирования фрагментов кода, которые могут быть на любом языке, например python, javascript и т. д, или в форматах, таких как JSON, Avro, SQL и т. д.

Здесь вы можете использовать Code Mirror для создания редактора, который позволяет конечным пользователям играть с фрагментами кода.

Зачем использовать Code Mirror вместо других библиотек

  • Поддержка более 100 языков
  • Поддержка сворачивания кода
  • Поддержка встроенных и блочных виджетов
  • Настраиваемые привязки
  • Используется такими браузерами, как firefox, chrome и safari.

Живой пример

Здесь вы можете увидеть живой пример использования Code Mirror с помощью инструмента Carbon для создания красивых изображений вашего исходного кода и обмена ими.

React Draft WYSIWYG

React Draft WYSIWYG - это редактор форматированного текста, созданный на основе reactjs и draftjs . готовый к использованию компонент react для обеспечения поддержки расширенного текста в вашем приложении.

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

В настоящее время большинство сообществ / публикаций, таких как Hashnodedev.tomediumshowscase  и devdojo обеспечивает поддержку богатого текстового контента, и они построили свой собственный богатый текстовый редактор. Но вам не нужно изобретать колесо, вы можете использовать React Draft WYSIWYG прямо в своем приложении.

Зачем использовать React Draft WYSIWYG по сравнению с другими библиотеками

  • Вы можете настроить параметры панели инструментов
  • Поддержка упоминаний и хештегов
  • Поддержка смайликов
  • Поддержка локализации.

Живой пример

Здесь вы можете увидеть живой пример из React Draft WYSIWYG.

React tippy

React Tippy - это легкая библиотека компонентов всплывающих подсказок для reactjs. Она предоставляет элемент всплывающей подсказки или HOC (компонент высшего порядка) и использует React DOM для визуализации всплывающей подсказки.

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

Вариант использования React tippy прост, если вам нужно показать некоторый контент с помощью всплывающей подсказки, тогда вам следует использовать библиотеку React Tippy.

Зачем использовать React Tippy по сравнению с другими библиотеками

  • Хорошо работает с reactjs
  • Улучшение Tippy.js
  • Поддержка нескольких триггеров
  • Настраиваемая
  • Поддержка разных тем
  • Поддержка разных размеров

Живой пример

Здесь вы можете найти живой пример React Tippy

Источник

Forem logo
Коментарии
Авторизоваться что-бы оставить комментарий
Присоединяйся в тусовку
Наш сайт использует файлы cookie для вашего максимального удобства. Пользуясь сайтом, вы даете свое согласие с условиями пользования cookie