https://github.com/vladtsf/refilterable

"batteries-included" library to manage URL filters in React-based apps. Uses hooks
https://github.com/vladtsf/refilterable

history hooks react url-filters

Last synced: about 2 months ago
JSON representation

"batteries-included" library to manage URL filters in React-based apps. Uses hooks

• Host: GitHub
• URL: https://github.com/vladtsf/refilterable
• Owner: vladtsf
• License: mit
• Created: 2019-06-05T22:24:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T06:12:57.000Z (about 2 years ago)
• Last Synced: 2024-04-15T02:13:24.936Z (9 months ago)
• Topics: history, hooks, react, url-filters
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/refilterable
• Size: 804 KB
• Stars: 12
• Watchers: 2
• Forks: 2
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


refilterable











  



**"batteries-included" library to manage URL filters in React-based apps. Uses hooks**



## Table of Contents

- [The problem](#the-problem)

- [This solution](#this-solution)

- [Example](#example)

- [Installation](#installation)

- [LICENSE](#license)

## The problem

You want to have stable, reusable URL filters in your React app. As part of this goal, you want to make sure your existing URL filters are not impacted by your new solution. Ideally, you also want to standardize all your interaction with URL filters once and then just refer to existing patterns when you need to add a new filter. Next, you want to make sure you have access to certain filter from any component in your codebase. Plus, you want to make sure small changes in the URL don't cause the whole tree of React components to rerender. Finally, you want to be able to set filters both from your JavaScript code and `` or react-router `` tags. All this has to be dead simple so you can focus on your app instead of reinventing the wheel.


## This solution

`refilterable` offers a simple two-step approach to the problem. You first define what URL parameters you're going to handle and then use a hook that gives allows you to access and mutate those parameters. You can also compose multiple filters into groups, which will allow you to batch mutations. The hook will cause your component to rerender only when the URL parameters relevant to the component change. It will also protect your component from values that are invalid – naturally you'll define what invalid means to you.

## Example

```jsx

// Range.jsx

import { createFilter, composeFilters, useFilter } from 'refilterable';

const minFilter = createFilter('min', {

  parse: (input) => parseInt(input),

  format: (value) => String(value),

  defaultValue: 0,

  validate: (input, parse) => parse(input) >= 0,

});

const maxFilter = createFilter('max', {

  parse: (input) => parseInt(input),

  format: (value) => String(value),

  defaultValue: 100,

  validate: (input, parse) => parse(input) >= 0,

});

const rangeFilter = composeFilters([min, max], ({ min, max }) => min <= max);

export function RangeInput() {

  const [min, setMin] = useFilter(minFilter);

  const [max, setMax] = useFilter(maxFilter);

  return (

    


      Min: 

      Max: 

    

  );

}


export function Range() {

  const [range, setRange] = useFilter(rangeFilter);

  return (

    


      Min: {range.min}

      Max: {range.max}

       setRange({ min: 0, max: 100 })}>Set [0-100]

    

  );

}


// App.jsx

import { FiltersProvider, useReset } from 'refilterable';

const history = createBrowserHistory();

function App() {

  return (

    

      

        

        

      

    

  );

}

```

## Installation

This module can be installed via `npm` or `yarn` and should be installed as one of your project's `dependencies`:

```

npm install --save refilterable

```

```

yarn add refilterable

```

This library has `peerDependencies` listings for `react` and `history`.