UI components for React + Elasticsearch

A simple search interface for React and Elasticsearch; an easy way to build data-driven search experiences.

Demo screenshot

Quick intro

Write expressive code to create search applications using declarative components.

const MySearchComponent = () => (

  <Elasticsearch url="http://example.org/search">

    <SearchBox id="mainSearch" />

    <Facet id="actors" fields={["actors"]} />

    <Facet id="releasedYear" fields={["releasedYear"]} />

    <Results

      id="results"

      items={data =>

        // Map on result hits and display whatever you want.

        data.map(item => <MyCardItem key={item._id} source={item._source} />)

      }

    />

  </Elasticsearch>

);

Main features

• 🏝 Released under MIT licence.
• 👩‍🎨 Each component is built with React and is customisable. Not too much extra features nor magic.
• 💅 It comes with no style so it's the developers responsibility to implement their own.
• 🐿 Only 35.32KB gzipped for the whole lib, compatible with old browsers: >0.03% usage.
• 🔮 No legacy: created in 2019, with hooks.

Why?

We started building the search experience of the french Cultural Heritage Open Platform with ReactiveSearch, a well-known search UI components lib for React. After some weeks, we realized we had spent a lot of time tweaking and hacking the lib; we had rewrote almost every components ourselves. We opened issues and pull requests on the repository, but it seemed the lib was a bit stuck in a rewrite process. We found out that we need a simple lib that can be easily extended with a similar API, we created this one. This lib has many less feature than others, it's not even a decent competitor. But since it helped us building a search experiences, it has been released. Hope it could help you!

Contributing

Open issues and PR here: https://github.com/betagouv/react-elasticsearch