React Spectrum — создание компонентов нового поколения

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

И мы встаём перед выбором: или копировать то, что уже было создано ранее или воспользоваться какой-либо библиотекой. Оба варианта не могут решить проблему на 100%, так как нам из раза в раз надо будет копаться в старом коде, либо искать новую подходящую библиотеку ( если повезёт её найти ).

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

Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей.

Выглядит это следующим образом:

1. Заходим в документацию

2. Находим нужный нам компонент ( как в примере с выпадающим меню )

   

3. Дублируем код, описанный в документации

   

4. Добавляем свои стили, логику и прочее

5. Удивляемся как просто можно создавать компоненты со сложной логикой

Структура библиотеки

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

Сама библиотека состоит из 4-х частей:

1. internationalized — набор функций и классов для работы с международными форматами данных

2. react-aria — хуки для нормализации доступности ( a11n ) на разных устройствах

3. react-spectrum — внутренние компоненты библиотеки, которые мы можем подгонять под наши цели

4. react-stately — хуки для работы с состоянием компонентов

Эти хуки могут быть использованы как вместе, так и по-отдельности в зависимости от нужного нам компонента. В идеале вам необходимо ознакомиться с последними тремя разделами ( ознакомиться, не зубрить ! ? ), и по мере надобности искать необходимые компоненты из списка, чтобы изучить подробнее.

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

Также существует отдельный раздел Spectrum Ecosystem. В нём содержится дизайн правила компании Adobe и сам CSS код, поэтому если хотите воспользоваться их UI kit’ом, то переходите смело по ссылке и читайте подробнее.

А пример можно ?

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