Feature Spotlight: Query Rules
You’re running an ecommerce site for an electronics retailer, and you’re seeing in your analytics that users keep ...
Technical Writer
You’re running an ecommerce site for an electronics retailer, and you’re seeing in your analytics that users keep ...
Technical Writer
What do OpenAI and DeepMind have in common? Give up? These innovative organizations both utilize technology known as transformer models ...
Sr. SEO Web Digital Marketing Manager
As a successful in-store boutique manager in 1994, you might have had your merchandisers adorn your street-facing storefront ...
Search and Discovery writer
At Algolia, our business is more than search and discovery, it’s the continuous improvement of site search. If you ...
JavaScript Library Developer
Analytics brings math and data into the otherwise very subjective world of ecommerce. It helps companies quantify how well their ...
Technical Writer
Amid all the momentous developments in the generative AI data space, are you a data scientist struggling to make sense ...
Sr. SEO Web Digital Marketing Manager
Fashion ideas for guest aunt informal summer wedding Funny movie to get my bored high-schoolers off their addictive gaming ...
Sr. SEO Web Digital Marketing Manager
Imagine you're visiting an online art gallery and a specific painting catches your eye. You'd like to find ...
Senior Software Engineer
At Algolia, our commitment to making a positive impact extends far beyond the digital landscape. We believe in the power ...
Senior Manager, People Success
In today’s post-pandemic-yet-still-super-competitive retail landscape, gaining, keeping, and converting ecommerce customers is no easy ...
Sr. SEO Web Digital Marketing Manager
There are few atmospheres as unique as that of a conference exhibit hall: the air always filled with an indescribable ...
Marketing Content Manager
To consider the question of what vectors are, it helps to be a mathematician, or at least someone who’s ...
Search and Discovery writer
My first foray into programming was writing Python on a Raspberry Pi to flicker some LED lights — it wasn’t ...
Technical Writer
How well do you know the world of modern ecommerce? With retail ecommerce sales having exceeded $5.7 trillion worldwide ...
Sr. SEO Web Digital Marketing Manager
In a world of artificial intelligence (AI), data serves as the foundation for machine learning (ML) models to identify trends ...
Director of AI Engineering
Imagine you’re a leading healthcare provider that performs extensive data collection as part of your patient management. You’re ...
Search and Discovery writer
In an era where customer experience reigns supreme, achieving digital excellence is a worthy goal for retail leaders. But what ...
Marketing Content Manager
Just a few years ago it would have required considerable resources to build a new AI service from scratch. Of ...
VP, Engineering
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 injecting custom CSS classes into your Algolia React components.
This is great news for people who use class-based CSS frameworks like Bootstrap and Tailwind! In my case, I was working with the Algolia Ecommerce UI Template, which relies on Tailwind for styling. I wanted to add a <TrendingFacets>
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.
Here’s how it looks before styling:
I can definitely do better! To accomplish this, I need to use the classNames
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 (cssClasses
) and Vue (class-names
) have had this functionality for years, and now it’s available in React thanks to the recent refresh that added React hooks.
The documentation lists the elements I can override for each Algolia widget. For instance, here are the elements for a <SearchBox>
widget:
For my <TrendingFacets>
widget, I want the list in a horizontal line to conserve space, so I add a flex
class to its list
element. I’ll also add a new facetItem
class to give each item
a nice capsule shape with some simple hover styling. Here’s how my component looks after styling.
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 classNames
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 Algolia documentation. If you’re new to Algolia, you can try it out by signing up for a free tier account.
Powered by Algolia Recommend