import React from 'react'; import { SearchBox, SearchBase, SearchComponent } from '@appbaseio/react-searchbox'; import ReactPaginate from 'react-paginate'; import './styles.css'; export default () => (

React Searchbox Demo{' '} API reference

{ return (

{loading ? (

Loading Filters ...

) : ( aggregationData.data.map(item => (

{ const values = value || []; if (values && values.includes(e.target.value)) { values.splice(values.indexOf(e.target.value), 1); } else { values.push(e.target.value); } // Set filter value and trigger custom query setValue(values, { triggerDefaultQuery: false, triggerCustomQuery: true, stateChanges: true }); }} /> {item._key} ({item._doc_count})

)) )}

); }} />

{({ results, loading, size, setValue, setFrom }) => { return (

{loading ? (

Loading Results ...

) : (

{!results.data.length ? (

No results found

) : (

{results.numberOfResults} results found in{' '} {results.time}ms

)} {results.data.map(item => (

by{' '} {item.authors}

{Array(item.average_rating_rounded) .fill('x') .map((i, index) => ( )) // eslint-disable-line } ({item.average_rating} avg)

Pub {item.original_publication_year}

))}

)} setFrom(selected * size)} previousLabel="previous" nextLabel="next" breakLabel="..." breakClassName="break-me" marginPagesDisplayed={2} pageRangeDisplayed={5} subContainerClassName="pages pagination" breakLinkClassName="page-link" containerClassName="pagination" pageClassName="page-item" pageLinkClassName="page-link" previousClassName="page-item" previousLinkClassName="page-link" nextClassName="page-item" nextLinkClassName="page-link" activeClassName="active" />

); }}

);