simple

Default mapping between InstantSearch state and the URL.

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

Signature

const stateMapping = simple();

Import

JavaScript

import { simple } from "instantsearch.js/es/lib/stateMappings";

About this function

This simple state mapping is the default for the <InstantSearch> component’s routing prop.

The router provides an API that lets you customize some of its behaviors. For more information, see Routing URLs.

The only transformation applied by the function is the omission of configure.

JavaScript

import { simple } from "instantsearch.js/es/lib/stateMappings";

const stateMapping = simple();

stateMapping.stateToRoute({
  instant_search: {
    query: "Apple",
    page: 5,
    configure: {
      hitsPerPage: 4,
    },
  },
});

// gives as output:
// {
//   instant_search: {
//     query: 'Apple',
//     page: 5,
//   },
// }

Examples

JavaScript

import { InstantSearch } from "react-instantsearch";
import { simple } from "instantsearch.js/es/lib/stateMappings";

const routing = {
  stateMapping: simple(),
};

function App() {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName="instant_search"
      routing={routing}
    >
      {/* ... */}
    </InstantSearch>
  );
}