useQueryFilter

Motivation

Recently I worked with some react applications, and our team needed to persist the filter's state into URL, and we needed a react hook to turn this work more easily, but we could not find anyone to do this.

When the filter's state is persisted in the URL the user receives a better experience. It's possible to use browser buttons to navigate in applications, also it's possible to refresh the browser tab and the result is the same because the filter's state is persisted in the URL, another good point is that, whit this approach it's possible to persist pagination, even because the pagination's state and filter's state should be the same.

How it's works

useQueryFilter uses react hook to persist the filter state in a component state and the same state is pushed into the URL. Then every state change is pushed into the URL and if the URL has some value or state when the component is mounting this Url state is propagated into the component state.

Instalation

npm i @use-form/use-query-filter or yarn add @use-form/use-query-filter

Demo

https://codesandbox.io/s/use-query-filter-iiend

Let's see some examples of use:

useQueryFilter

   const initialValues = {
      keywords:'',
      sort:'az'
   }

   const [filter, set, reset] = useQueryFilter(initialValues)

   <input name="keywords" onChange={e=>set({keywords:e.target.value})}/>

   <select onChange={e=>set({sort:e.target.value})}>
      <option value="az">A - Z</option>
      <option value="za">Z - A</option>
   </select>

useFilterContext

useFilterContext is helpful when is necessary to share the filter state with another component, in the same example is very common to have a filter component, a table component, and a pagination component, in this case, should have a container component and into this component, useFilterContext should be used like this example:

   const initialValues = {
      keywords:'',
      sort:'az'
   }

   function Container(){

      const filter = useQueryFilter(initialValues)

      return (
         <FilterContext.Provider value={filter}>
            <Filter/>
            <List/>
            <Pagination/>
         </FilterContext.Provider>
      )
   }

   function Filter(){

      const [filter,{set}] = useFilterContext()

      return(
         <>
            <input name="keywords" onChange={e=>set({keywords:e.target.value})}/>

            <select onChange={e=>set({sort:e.target.value})}>
               <option value="az">A - Z</option>
               <option value="za">Z - A</option>
            </select>
         </>
      )
   }

   function List(){

      const [filter,{set}] = useFilterContext()

      return(<>...</>)
   }

   function Pagination(){

      const [filter,{set}] = useFilterContext()

      return(<>...</>)
   }