searchbase is a lightweight and platform agnostic library that provides scaffolding to create search experiences powered by Elasticsearch.

Initialization

You can initialize SearchBase in the constructor or componentDidMount

constructor(props) {
    super(props);
    const index = INDEX;
    const url = URL;
    const credentials = CRED;

    this.searchBase = new SearchBase({
      index,
      url,
      credentials
    });

    // Register search component
    const searchComponent = this.searchBase.register('search-component', {
      // pass this prop as true to enable predictive suggestions
      enablePredictiveSuggestions: true,
      dataField: [
        'name',
        'description',
        'name.raw',
        'fullname',
        'owner',
        'topics'
      ],
    });

    // Pre-load results
    this.searchComponent.triggerDefaultQuery();

    // Subscribe to results update
    this.searchComponent.subscribeToStateChanges((change) => {
      this.setState({
        results: change.results.next,
      })
    }, ['results']);
}

Change Events

handleSelect = value => {
    // Fetch results on selection
    this.searchComponent.setValue(value, {
        triggerDefaultQuery: true,
    });
};

handleChange = e => {
    // Just update value on change
    this.searchComponent.setValue(e.target.value, {
        triggerDefaultQuery: false,
    });
};

Renderers

Input Render

<input type="text" value={this.searchComponent.value} onChange={this.handleChange} />

Suggestions Render

<section style={{ margin: 20 }}>
    <b>Suggestions</b>
    {this.searchComponent.requestPending && <div>Loading suggestions...</div>}
    {this.searchComponent.results.data.map(i => {
        return (
            <div onClick={() => this.handleSelect(i.value)} key={i.label}>
                {i.label}
            </div>
        );
    })}
</section>

Results Render

<section style={{ margin: 20 }}>
    <b>Results</b>
    {this.searchBase.results.data.map(i => {
        return <div key={i._id}>{i.name}</div>;
    })}
</section>

Demo