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

The current Context
The current props


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 }) => ({

// Uses current `props` to conditionally modify context
withSearch(({ searchTerm }, { someProp }) => ({
  searchTerm: someProp ? "" : searchTerm


This is the HOC approach to working with the core.

This is typically used for creating your own Components.

See Build Your Own Component.


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 && (
            header={<SearchBox />}
            bodyContent={<Results titleField="title" urlField="nps_link" />}