https://github.com/gxlmyacc/react-filter-utils

https://github.com/gxlmyacc/react-filter-utils

const-enum create-filter key-value-pairs react vue-filter

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/gxlmyacc/react-filter-utils
• Owner: gxlmyacc
• License: mit
• Created: 2021-12-15T03:42:40.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-22T01:52:45.000Z (8 months ago)
• Last Synced: 2024-10-31T15:53:28.132Z (about 2 months ago)
• Topics: const-enum, create-filter, key-value-pairs, react, vue-filter
• Language: JavaScript
• Homepage:
• Size: 142 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-filter-utils

filter utils for react

[![NPM version](https://img.shields.io/npm/v/react-filter-utils.svg?style=flat)](https://npmjs.com/package/react-filter-utils)

[![NPM downloads](https://img.shields.io/npm/dm/react-filter-utils.svg?style=flat)](https://npmjs.com/package/react-filter-utils)

## install

```bash

npm install --save react-filter-utils

```

or

```bash

yarn add react-filter-utils

```

## usage

### 1. define a filter:

```js

// filter.js

import { createFilter } from 'react-filter-utils';

const map = {

  YES: 'yes',

  NO: 'no',

  OTHER: 'other options',

};

const _external = {

  something(v) {

    console.log(v)

  }

};

const filter = createFilter(map, null {

  external: _external,

  // or

  external(filter) {

    return _external

  }

});

export default filter;

```

or

```js

// filter.js

import { createFilter } from 'react-filter-utils';

const map = {

  1: 'yes',

  2: 'no',

  3: 'other options',

};

const _external = {

  something(v) {

    console.log(v)

  }

};

const filter = createFilter(map, {

  YES: '1',

  NO: '2',

  OTHER: '3',

} {

  external: _external,

  // or

  external(filter) {

    return _external

  }

});

export default filter;

```

### 2. use the filter:

```js

// test.js

import React, { useState } from 'react';

import filter from './filter.js';

import { Select } from 'antd';

function Test() {

  const [value, setValue] = useState('');

  useEffact(()=> {

    console.log(/* value*/ filter.YES, /* label */ filter(filter.YES));

    

    // call external method of the filter

    filter.something();

  }, []);

  return (

    <>

       setValue(value)}

      >

        {

          // render list using filter

          filter.list.map(

            (item) => ({item.label})

          )

        }

      

    


    result: you selected {filter(value)}

  >

  );

}

```


## License

[MIT](./LICENSE)