Dan Powell

Dan Powell

← Back to home
Preview of useClientSideFilters
View on GitHub ↗

useClientSideFilters


Problem:

Offering users filters to more quickly parse what they are looking for in an e-commerce setting.

The data we're talking about is 'small enough' that the full dataset is readily available to the client either at build time (think JAMStack) or fetched from API when the page loads (a la componentDidMount) depending on context.

Solution:

  • write a hook that builds the filters from the data collection (array of objects)
  • have the hook filter down the collection
  • use a form in the UI to control the filters
  • have the form submit ~onChange so that the URL's search query saves filter state (good for pre-fill/sharing)

BONUS: This is abstracted so it can power really anything that needs this sort of functionality!

See it live!

NOTE: This is in a Gatsby project that I contribute to so it is using @reach/router under the hood (which then became react-router v6)