Настройка компонентов Algolia React с помощью классов Tailwind

Когда я был в парижском офисе Algolia на прошлой неделе, Дхайя Бенмессауд из нашей команды Front-end Experience показал мне интересный прием для стилизации React-виджетов Algolia в вашем пользовательском интерфейсе. Из коробки Algolia предоставляет несколько готовых тем для поиска (Algolia и Satellite) и возможность создания собственных тем. Недавно команда разработчиков фронтенд-опыта добавила третий способ стилизации пользовательского интерфейса — введение пользовательских классов CSS в компоненты Algolia React.

Это отличная новость для тех, кто использует CSS-фреймворки на основе классов, такие как Bootstrap и Tailwind! В моем случае я работал с шаблоном пользовательского интерфейса Algolia Ecommerce, который использует Tailwind для создания стиля. Я хотел добавить виджет <TrendingFacets> из библиотеки Algolia Recommend UI на свою домашнюю страницу, но хотел оформить его с помощью классов Tailwind, чтобы он соответствовал остальному фронтенду.

Вот как он выглядит до стилизации:

Я определенно могу сделать лучше! Для этого мне нужно использовать атрибут classNames для моего компонента. Он доступен для всех React-виджетов Algolia (включая Recommend) и позволяет вам переопределять стилизацию элементов, относящихся к конкретному компоненту. Некоторые из наших других внешних API, таких как Vanilla JavaScript (cssClasses) и Vue (class-names), имеют эту функциональность уже много лет, а теперь она доступна в React благодаря недавнему обновлению, которое добавило крючки React.

В документации перечислены элементы, которые я могу переопределить для каждого виджета Algolia. Например, вот элементы для виджета <SearchBox>:

  • root: Корневой элемент виджета.
  • form: Элемент формы.
  • input: Элемент ввода.
  • submit: Кнопка отправки.
  • сброс: Кнопка сброса.
  • loadingIndicator: Элемент индикатора загрузки.
  • submitIcon: значок отправки.
  • resetIcon: значок сброса.
  • loadingIcon: значок загрузки.

Для моего виджета <TrendingFacets> я хочу, чтобы список располагался в горизонтальной линии для экономии места, поэтому я добавляю класс flex к его элементу list. Я также добавлю новый класс facetItem, чтобы придать каждому item чистую форму капсулы с простой стилизацией при наведении. Вот как выглядит мой компонент после стилизации.

А вот код:

<TrendingFacets
  classNames={{ list: 'flex', item: 'facetItem' }}
  recommendClient={recommendClient}
  indexName={indexName}
  maxRecommendations={3}
  itemComponent={({ item }) => (
    <a href={item.facetValue}>{item.facetValue}</a>
  )}
  facetName={facetName}
/>
Вход в полноэкранный режим Выход из полноэкранного режима

Добавление classNames для настройки стиля виджетов Algolia имеет большой смысл, особенно для таких людей, как я, которые пристрастились к Tailwind CSS для стилизации фронт-эндов. Подробнее о добавлении пользовательских классов CSS к виджетам вы можете прочитать в документации Algolia. Если вы новичок в Algolia, вы можете попробовать ее, зарегистрировавшись на бесплатном уровне.

Я буду рад увидеть другие примеры хорошо оформленных поисковых интерфейсов в комментариях!

Оцените статью
devanswers.ru
Добавить комментарий