NumberFilter

NumberFilter allows filtering between many numeric types with a basic set of logic including: greater than, less than, equal to, or between.

Result

Loading...

Live Editor

function Example() { const [filterOption, setFilterOption] = React.useState(); return ( <NumberFilter id="demo-component-one" filterName="Basic Number Filter" onApply={(event, { value }) => setFilterOption(value)} value={filterOption} /> ); }

function Example() {
    const [filterOption, setFilterOption] = React.useState();

    return (
        <NumberFilter
            id="demo-component-one"
            filterName="Basic Number Filter"
            onApply={(event, { value }) => setFilterOption(value)}
            value={filterOption}
        />
    );
}

Statefully Manage Number Filter Operator

Result

Loading...

Live Editor

function Example() { const [value, setValue] = React.useState({ startValue: '10', endValue: '100' }); const [operator, setOperator] = React.useState('between'); return ( <NumberFilter id="demo-component-stateful" filterName="Basic Number Filter" onApply={(event, payload) => { setValue(payload.value); setOperator(payload.operator); }} value={value} operator={operator} /> ); }

function Example() {
    const [value, setValue] = React.useState({ startValue: '10', endValue: '100' });
    const [operator, setOperator] = React.useState('between');

    return (
        <NumberFilter
            id="demo-component-stateful"
            filterName="Basic Number Filter"
            onApply={(event, payload) => {
                setValue(payload.value);
                setOperator(payload.operator);
            }}
            value={value}
            operator={operator}
        />
    );
}

Analytics

The NumberFilter component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'NumberFilter',
	actions: {
		onApply: { type: 'NUMBERFILTER_APPLY', payload: 'Apply' },
	},
};

Props