Я думаю, что многие задумывались при создании новых и новых проектов о том, что компоненты между ними имеют одну и ту же логику, которую зачастую не так-то и быстро можно написать с нуля.
И мы встаём перед выбором: или копировать то, что уже было создано ранее или воспользоваться какой-либо библиотекой. Оба варианта не могут решить проблему на 100%, так как нам из раза в раз надо будет копаться в старом коде, либо искать новую подходящую библиотеку ( если повезёт её найти ).
Нам не хватает единого источника правды, от которого можно было бы отталкиваться при создании компонентов.
Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей.
Выглядит это следующим образом:
Заходим в документацию
Находим нужный нам компонент ( как в примере с выпадающим меню )
Схематичное отображение компонента в React Aria Дублируем код, описанный в документации
Код для компонента из React Aria Добавляем свои стили, логику и прочее
Удивляемся как просто можно создавать компоненты со сложной логикой
Структура библиотеки
Выше я специально кратко описал как устроена библиотека, чтобы неосведомлённый мог быстро вникнуть и понять нужно ли это ему. Для тех, кто хотел бы узнать побольше, едем дальше.
Сама библиотека состоит из 4-х частей:
internationalized - набор функций и классов для работы с международными форматами данных
react-aria - хуки для нормализации доступности ( a11n ) на разных устройствах
react-spectrum - внутренние компоненты библиотеки, которые мы можем подгонять под наши цели
react-stately - хуки для работы с состоянием компонентов
Эти хуки могут быть использованы как вместе, так и по-отдельности в зависимости от нужного нам компонента. В идеале вам необходимо ознакомиться с последними тремя разделами ( ознакомиться, не зубрить !
Интересные статьи
Интересные статьи
