While I was at Algolia’s Paris office last week, Dhaya Benmessaoud from our Front-end Experience team showed me a cool trick for styling Algolia’s React widgets in your UI. Out-of-the-box, Algolia provides a couple of pre-built themes for search experiences (Algolia and Satellite) as well as the ability to create custom themes. Recently, the front-end experience team has added a third way to style your UI, by into your Algolia injecting custom CSS classes React components. This is great news for people who use class-based like Bootstrap and ! In my case, I was working with the Algolia , which relies on Tailwind for styling. I wanted to add a widget from the Algolia Recommend UI library to my homepage, but I wanted to style it using Tailwind classes to match the rest of my front-end. CSS frameworks Tailwind Ecommerce UI Template <TrendingFacets> Here’s how it looks before styling: I can definitely do better! To accomplish this, I need to use the attribute for my component. It’s available for all of Algolia’s React widgets (including Recommend) and it allows you to override styling on component-specific elements. Some of our other front-end APIs like Vanilla JavaScript ( ) and Vue ( ) have had this functionality for years, and now it’s available in React thanks to the recent refresh that added React hooks. classNames cssClasses class-names The documentation lists the elements I can override for each Algolia widget. For instance, here are the elements of a widget: <SearchBox> : The root element of the widget. root : The form element. form : The input element. input : The submit button. submit : The reset button. reset : The loading indicator element. loadingIndicator : The submit icon. submitIcon : The reset icon. resetIcon : The loading icon. loadingIcon For my widget, I want the list in a horizontal line to conserve space, so I add a class to its element. I’ll also add a new class to give each a nice capsule shape with some simple hover styling. Here’s how my component looks after styling. <TrendingFacets> flex list facetItem item And here’s the code: <TrendingFacets
  classNames={{ list: 'flex', item: 'facetItem' }}
  recommendClient={recommendClient}
  indexName={indexName}
  maxRecommendations={3}
  itemComponent={({ item }) => (
    <a href={item.facetValue}>{item.facetValue}</a>
  )}
  facetName={facetName}
/> Adding to customize the style of Algolia widgets makes so much sense, especially for people like me who are addicted to Tailwind CSS for styling front-ends. You can read more about adding custom CSS classes to widgets in the . If you’re new to Algolia, you can try it out by signing up for a . classNames Algolia documentation free tier account Also published here.

This story contains new, firsthand information uncovered by the writer.

Visit us

Too Long; Didn't Read

Making security fun one episode at a time

Using Tailwind Classes to Customize Algolia React Components

Too Long; Didn't Read

Algolia

STORY’S CREDIBILITY

Original Reporting

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Using Tailwind Classes to Customize Algolia React Components

Too Long; Didn't Read

Algolia

STORY’S CREDIBILITY

Original Reporting

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES