Sorry, no results found for "".
In addition to the low-level API request presented in the previous section, our react-datocms
package also includes a React hook that you can use to render a full-featured Site Search widget on your website.
First of all, install the required npm packages in your React project:
You can then use the useSiteSearch
hook like this:
import { useSiteSearch } from 'react-datocms';import { buildClient } from '@datocms/cma-client-browser';
const client = buildClient({ apiToken: 'YOUR_API_TOKEN' });
const { state, error, data } = useSiteSearch({ client, buildTriggerId: '7497', // optional: you can omit it you only have one locale, or you want to find results in every locale initialState: { locale: 'en' }, // optional: to configure how to present the part of page title/content that matches the query highlightMatch: (text, key, context) => context === 'title' ? ( <strong key={key}>{text}</strong> ) : ( <mark key={key}>{text}</mark> ), // optional: defaults to 8 search results per page resultsPerPage: 10,});
Please follow the react-datocms
documentation to read more about at the configuration options and the data returned by the hook.
The following example uses the react-paginate
npm package to simplify the handling of pagination. You can build your own pagination using the data.totalPages
property to get the total number of pages, state.page
to get the current page, and state.setPage(page)
to trigger a page change.
import { useState } from 'react';import { buildClient } from '@datocms/cma-client-browser';import ReactPaginate from 'react-paginate';import { useSiteSearch } from 'react-datocms';
const client = buildClient({ apiToken: 'YOUR_API_TOKEN' });
function App() { const [query, setQuery] = useState('');
const { state, error, data } = useSiteSearch({ client, initialState: { locale: 'en' }, buildTriggerId: '7497', resultsPerPage: 10, });
return ( <div> <form onSubmit={(e) => { e.preventDefault(); state.setQuery(query); }} > <input type="search" value={query} onChange={(e) => setQuery(e.target.value)} /> <select value={state.locale} onChange={(e) => { state.setLocale(e.target.value); }} > <option value="en">English</option> <option value="it">Italian</option> </select> </form> {!data && !error && <p>Loading...</p>} {error && <p>Error! {error}</p>} {data && ( <> {data.pageResults.map((result) => ( <div key={result.id}> <a href={result.url}>{result.title}</a> <div>{result.bodyExcerpt}</div> <div>{result.url}</div> </div> ))} <p>Total results: {data.totalResults}</p> <ReactPaginate pageCount={data.totalPages} forcePage={state.page} onPageChange={({ selected }) => { state.setPage(selected); }} activeClassName="active" renderOnZeroPageCount={() => null} /> </> )} </div> );}