Upgrade v4 to v5

Renamed things

Some components and props have been renamed, Typescript should alert you to all of these issues e.g. The SensorStack component has been renamed to Sensors and the ResultStateProvider component has been renamed to Stats.

Refactored things

Other components have been refactored to varying degrees, wrapping common verbose patterns into simpler alternatives.

e.g. Previously you would use the render props on the FilterStack component to iterate over the available filters and pass them into the Filter component where you would then use it's renderFilterList (and similar props) to render a filter.

Reactify Search v4

import { FilterStack } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <FilterStack
      render={(filters) => filters.map((filter) => (
        <Filter
          filter={filter}
          renderFilterList={...}
          renderFilterRange={...}
          renderFilterSlider={...}
        />
      )}
    />
  );
};

The FilterStack component has now been renamed to Filters and does the iterating itself and exposes the props found on the Filter component.

Reactify Search v5

import { Filters } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <Filters
      renderFilterList={...}
      renderFilterRange={...}
      renderFilterSlider={...}
    />
  );
};

The functionality of the two snippets above is identical.

In addition there are now many more utility hooks available, e.g. the useFilters hook provides all of the active filters, this is useful if you'd like to conditionally hide some of them based on which collection is being viewed or if certain filters are shown in different areas of the page.

The product grid

Previously when using the ResultList component (renamed to Results) you would render results with the renderResults props, this prop gave you access to all results in an array which you would iterate over and render into a grid of your choosing.

This has changed for many reasons and now the grid itself is controlled by the Results component and you're only given access render props for the individual results rather than the entire array and so migrating from controlling the entire array to controlling a single result can be problematic from a design perspective.

There are two props on the Results component called listStyle and listClassName which allow you to customize the CSS of the grid yourself, it's important that a CSS grid is used but other than that you're able to style it in whatever way makes sense. Many merchants using class-based-styling e.g. tailwind can simply use the listClassName prop to apply the relevant styling based on breakpoints and for the most part this works like the className prop for any other component.

You may find that previously there was a lot of additional components and design elements being rendered within the renderResults prop and many times it relied on data such as the result stats e.g. total number of results which can now be found in the Stats component and any of those design elements should most likely be moved outside of the Results component and wrapped within a Stats component to get access to the data. See the example migration below for more context.

Reactify Search v4

import { ResultList } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <ResultList
      renderResults={(renderProps) => (
        <>
          Total results: {renderProps.resultStats.numberOfResults}
          <div className="grid gap-2 ...">
            {renderProps.results.map((result) => ...}
          </div>
        </>
      )}
    />
  );
};

Reactify Search v5

import { Results, Stats } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <>
      <Stats
        render={(renderProps) => (
          <>
            Total results: {renderProps.resultStats.numberOfResults}
          </>
        )}
      >
      <Results
        listClassName="grid gap-2 ..."
        renderResultCardProduct={(renderProps) => ...}
        renderResultCardCallout={(renderProps) => ...}
      />
    </>
  );
};