react-filter-utils
v0.1.0
Published
filter utils for react
Downloads
39
Readme
react-filter-utils
filter utils for react
install
npm install --save react-filter-utils
or
yarn add react-filter-utils
usage
1. define a filter:
// 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
// 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:
// 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 (
<>
<Select
value={value}
onChange={value => setValue(value)}
>
{
// render list using filter
filter.list.map(
(item) => (<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>)
)
}
</Select>
<hr />
result: you selected {filter(value)}
</>
);
}