React routing filters

DEMO 1

DEMO 2

Package allows you to share filters (or other serializable data) across url's, even if you using HashRouter. Urls are copyable across application :)

E.g.: if you want to pass object like below in application url

{
    name: 'Dave',
    surname: 'Wo'
}

with this library you can achieve something like this: localhost:3000/#/users/?name=Dave&surname=Wo

API

Context provides api described below:

interface FiltersContext<T> {
    filters: T
    setFilters(filters:T):void
    reset():void
}

Usage

FiltersProvider

Provides context which looks like this:

interface FiltersContext<T> {
    filters: T,
    setFilters: (filters:T) => void,
    reset: () => void
}

Warning if you want set array in filters:

setFilters({
  random: [Math.random(), Math.random()]
});

remember that values passed in array can not contains comas. It's because filters are parsed according to URL search string rules which specify that comas are separators for one-to-many values

Example

import ReactDOM from "react-dom";
import React, { useContext } from 'react';
import { FiltersProvider, FiltersContext } from 'react-routing-filters';

function FiltersButton() {
  const { setFilters } = useContext(FiltersContext);

  const handleClick = () => setFilters({
      random: Math.random()
    });

  return <button onClick={handleClick}>
    Set random filter
  </button>
}

function LogFilters() {
  const { filters } = useContext(FiltersContext);

  return <pre>{JSON.stringify(filters, null, 4)}</pre>;
}

function App() {
  return (
    <FiltersProvider>
      <div>
        <FiltersButton />
        <LogFilters />
      </div>
    </FiltersProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);