WithSearch & withSearch
If you wish to use Search UI and build your own custom component, you will need to use our HOCs to use Search UI's core state and actions.
There are two HOCs for accessing Search UI's state & actions, withSearch and
WithSearch. They use the HOC and
Render Props patterns, respectively. The two methods
are similar, and choosing between the two is mostly personal preference.
Both methods expose a mapContextToProps function which allows you to pick which state and actions
from context you need to work with.
mapContextToProps
mapContextToProps allows you to pick which state and actions
from Context you need to work with. withSearch and WithSearch both use React.PureComponent,
and will only re-render when the picked state has changed.
| name | type | description |
|---|---|---|
context | Object | The current Context |
props | Object | The current props |
ex.:
import { withSearch } from "@elastic/react-search-ui";
const Component = ({ searchTerm, setSearchTerm }) => {
return (
<form onSubmit={(e) => {
}}
<input type="text" value={searchTerm}>
)
}
// Selects `searchTerm` and `setSearchTerm` for use in Component
withSearch(({ searchTerm, setSearchTerm }) => ({
searchTerm,
setSearchTerm
}))(Component);
// Uses current `props` to conditionally modify context
withSearch(({ searchTerm }, { someProp }) => ({
searchTerm: someProp ? "" : searchTerm
}))(Component);withSearch
This is the HOC approach to working with the core.
This is typically used for creating your own Components.
WithSearch
This is the Render Props approach to working with the core.
One use case for that would be to render a "loading" indicator any time the application is fetching data.
For example:
import { WithSearch } from "@elastic/react-search-ui";
<SearchProvider config={config}>
<WithSearch mapContextToProps={({ isLoading }) => ({ isLoading })}>
{({ isLoading }) => (
<div className="App">
{isLoading && <div>I'm loading now</div>}
{!isLoading && (
<Layout
header={<SearchBox />}
bodyContent={<Results titleField="title" urlField="nps_link" />}
/>
)}
</div>
)}
</WithSearch>
</SearchProvider>;