Nerdiest Precious Modules

    handy-filter-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    Handy Filter Hook GitHub license npm version

    Overview

    Handy Filter Hook is a react hook for Handy Filter.

    Installation

    npm:

    npm install handy-filter handy-filter-hook
    

    yarn:

    yarn add handy-filter handy-filter-hook
    

    Peer Dependencies

    Handy Filter Hook does not depend on the specific version of react or handy-filter. You only need to install them.

    NOTE: The minimum supported version of handy-filter is 1.0.9

    Table of Contents

    Usage

    Handy Filter Hook is fully compatible with handy-filter conditions.

    import React from 'react';
    import { eq } from 'handy-filter';
    import useFilter from 'handy-filter-hook';
    
    const MyComponent = (data) => {
      const [filteredData, setCondition] = useFilter({ init: data });
      
      const onChangeHandler = (newValue) => {
        setCondition(eq('nesded.someProp', newValue));
      };
    
      return <SomeComponent values={filteredData} onChange={onChangeHandler}/>;
    };

    With async data

    If you receive data asynchronously you can use the third function that is returned from useFilter to set the received data:

    import React, { useEffect } from 'react';
    import { ne } from 'handy-filter';
    import useFilter from 'handy-filter-hook';
    
    const MyComponent = () => {
      const [filteredData, setCondition, setData] = useFilter();
      
      const onChangeHandler = (newValue) => {
        setCondition(ne('nesded.someProp', newValue));
      };
    
      useEffect(() => {
        const getData = async () => {
          const data = await myFetch();
          setData(data);
        };
      });
    
      return <SomeComponent values={filteredData} onChange={onChangeHandler}/>;
    };

    NOTE: the setCondition and setData are stable and won’t change on re-renders.

    Multiple conditions

    If you want to set multiple conditions, for example when you have more than one component that change your data, you need to use a key as the second parameter of setCondition:

    import React, { useEffect } from 'react';
    import { icnt, eq } from 'handy-filter';
    import useFilter from 'handy-filter-hook';
    
    const MyComponent = (data) => {
      const [filteredData, setCondition] = useFilter({ init: data });
      
      const onChangeHandler = (newValue) => {
        setCondition(icnt('nesded.someProp', newValue), 'foo');
      };
    
      const onClickHandler = (newValue) => {
        setCondition(eq('prop', newValue), 'bar');
      };
    
      return (
        <>
          <Foo onChange={onChangeHandler}/>
          <Bar onClick={onClickHandler}/>
          <DataViewer data={filteredData}/>
        </>
      );
    };

    The key can be any value you want, all you need is for the key to be unique within one component.

    By default, conditions with different keys are joined with logical "and". If you want to change this behavior see hook options.

    Hook options

    If you want to change the default hook behavior, you need to pass options object to useFilter:

    useFilter({ options: yourOptions })

    join

    Sets how the conditions with different keys will be joined.

    Valid values Default
    and, or and

    For example:

    import { gte, ne } from 'handy-filter';
    import useFilter from 'handy-filter-hook';
    
    const init = [
      { foo: 10, bar: null },
      { foo: 20, bar: true },
      { foo: 50, bar: null },
      { foo: 100, bar: false },
      { foo: 5, bar: true },
    ];
    
    const [filteredData, setCondition] = useFilter({ init, options: { join: /* 'and' or 'or' */ } });
    
    setCondition(gte('foo', 20), 'key1');
    setCondition(ne('bar', null), 'key2');
    
    // if the join option is 'and' result will be
    // [{ foo: 20, bar: true }, { foo: 100, bar: false }]
    
    // if the join option is 'or' result will be
    // [{ foo: 20, bar: true }, { foo: 50, bar: null }, { foo: 100, bar: false }, { foo: 5, bar: true }] 

    Install

    npm i handy-filter-hook

    DownloadsWeekly Downloads

    58

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    14 kB

    Total Files

    12

    Last publish

    Collaborators

    • tohman21