Skip to main content

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}
		/>
	);
}

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}
		/>
	);
}

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​