Implementing Search with Cludo’s React Storybook

24 Apr, 2025 Implementation

Cludo offers a dedicated React Component Library that makes it easy to add powerful search capabilities to your website without building everything from scratch. By using Cludo’s pre-built React components and hooks, you can integrate search functionality quickly and customize it to match your site’s design and user experience.

What is Cludo’s React Component Library?

The Cludo React Component Library provides ready-to-use components like results, facets, and pagination, as well as hooks for building custom components. Instead of writing the low-level logic to connect to Cludo’s API, manage search state, and track analytics, you can leverage these components to get up and running faster.

This approach is ideal whether you’re building a standalone search page with a pre-configured layout or integrating search into an existing React application with your custom UI.

All components are documented in the Cludo React Storybook, where you can explore examples and usage guidelines.

Project Types

When you create a Cludo React project, you can choose between two main approaches:

  • React Search Controller: A fully configured project that includes search logic, state management, and example templates. This option is great if you prefer to start with a working search interface you can customize.
  • React Search Core: A minimal setup that provides only the core state management and hooks, allowing you to design every aspect of the interface yourself. This is ideal for advanced implementations or integrations into an existing site.

Both options rely on a configuration object to connect your application to your Cludo account and search engine.

Key Components and Features

Typical implementations include:

  • ResultsList: A component that displays search results dynamically.
  • FacetGroup: A component that displays facets dynamically.
  • Hooks: Utilities like useAutocomplete and usePagination for building custom features like suggestions and navigation.

Cludo’s React Component Library also handles analytics and event tracking automatically, so you don’t need to integrate separate scripts.

Getting Started

Setting up Cludo Search in a React project involves these main steps:

Install the CLI:
You can install the Cludo React Component Library and CLI tools via npm. The CLI helps build your project with the necessary dependencies and structure.

npm install @cludosearch/cludo-templates-cli -g

Initialize Your Project:
Use the Cludo CLI to create a new project. You’ll be prompted to enter your Cludo credentials, such as Customer ID and Engine ID. These credentials link your app to your Cludo search engine.

Configure Search Settings:
Define a configuration object that includes essential settings, such as:

  • Customer ID and Engine ID
  • The preferred language
  • The URL of your search results page (or current page in a single-page app)

Add Cludo Components:
In your React code, insert components like ResultsList and FacetGroup wherever you want your search interface to appear. If you are using React Search Core, wrap the relevant part of your application with CludoWrapper, passing in your configuration.

Customize and Style:
All Cludo components can be styled using CSS and configured with props to match your design and requirements.

Test and Launch:
Test and verify the search experience. Once everything looks good, build your project for production and deploy it as you would any other React application.

Related Posts