https://github.com/mpolinowski/reactive_search

A React.js interface for Elasticsearch 7.8 using reactivesearch 3
https://github.com/mpolinowski/reactive_search

create-react-app elasticsearch7 reactivesearch reactjs search-interface

Last synced: 5 months ago
JSON representation

A React.js interface for Elasticsearch 7.8 using reactivesearch 3

• Host: GitHub
• URL: https://github.com/mpolinowski/reactive_search
• Owner: mpolinowski
• Created: 2020-07-17T13:29:15.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-07-17T14:06:58.000Z (over 5 years ago)
• Last Synced: 2025-01-28T19:17:31.089Z (about 1 year ago)
• Topics: create-react-app, elasticsearch7, reactivesearch, reactjs, search-interface
• Language: JavaScript
• Homepage: https://wiki.instar.com/Search/
• Size: 1.46 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
```md

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

```

![ReactiveSearch Elasticsearch Interface](./reactiveSearch.gif)

# ReactiveSearch App

We can either add [ReactiveSearch](https://opensource.appbase.io/reactivesearch) to an existing app or create a boilerplate app with Create React App (CRA):

```bash

create-react-app search-app && cd search-app

```

## Install ReactiveSearch

We will fetch and install reactivesearch module using yarn or npm.

```bash

npm install @appbaseio/reactivesearch

```

## Building your App

Lets add our first ReactiveSearch component: [ReactiveBase](https://opensource.appbase.io/reactive-manual/getting-started/reactivebase.html), it is a backend connector where we can configure the Elasticsearch index / authorization setup.

We will update our `src/App.js` file to add ReactiveBase component and connect them to our local instance of Elasticsearch 7.8:

```js

import React, { Component } from "react";

import {

  ReactiveBase,

  CategorySearch,

  SelectedFilters,

  ReactiveList,

  SingleList,

  MultiList,

  ResultList,

} from "@appbaseio/reactivesearch";

const { ResultListWrapper } = ReactiveList;

const flexBox = {

  display: "flex",

  marginTop: 20,

};

const flexColumn = {

  flexDirection: "row",

};

const tagsSelector = {

  minHeight: "100%",

};

class App extends Component {

  render() {

    return (

      

        

        

        


          


            


            


            

            


            

            


          
{" "}

          {/* FlexColumn */}

          

            {({ data, error, loading }) => (

              

                {data.map((item) => (

                  

                    

                      

                      

                        

                        

                      

                    

                  

                ))}

              

            )}

          

        
{" "}

        {/* FlexBox */}

      

    );

  }

}


export default App;

```