Algolia is a hosted, API-first platform used to build world-class search & discovery experiences.
Start building quickly using libraries for every major language and framework. Scale your solution with a platform that serves over 85 billion queries for more than 13k customers every month.
React InstantSearch UI library is
CSS (get a free account here)
1body { font-family: sans-serif; padding: 1em; } 2.ais-SearchBox { margin: 1em 0; } 3.ais-Pagination { margin-top: 1em } 4.left-panel { float: left; width: 250px; } 5.right-panel { margin-left: 260px; }
Import Components
1import { 2 InstantSearch, 3 Highlight, 4 Hits, 5 SearchBox, 6} from 'react-instantsearch-hooks-web';
Search
1// Create the App component 2class App extends Component { 3 render() { 4 return ( 5 <div className="ais-InstantSearch"> 6 <h1>React InstantSearch e-commerce demo</h1> 7 <InstantSearch indexName="demo_ecommerce" searchClient={searchClient}> 8 <div className="right-panel"> 9 <SearchBox /> 10 <Hits hitComponent={Hit} /> 11 </div> 12 </InstantSearch> 13 </div> 14 ); 15 } 16} 17 18 19function Hit(props) { 20 return ( 21 <div> 22 <img src={props.hit.image} align="left" alt={props.hit.name} /> 23 <div className="hit-name"> 24 <Highlight attribute="name" hit={props.hit} /> 25 </div> 26 <div className="hit-description"> 27 <Highlight attribute="description" hit={props.hit} /> 28 </div> 29 <div className="hit-price">${props.hit.price}</div> 30 </div> 31 ); 32}
