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

Copy 
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

Copy 
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

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

Suggestions Render

Copy 
<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

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

Demo