Search

Result

Loading...

Live Editor

function Example() {
	return (
		<div style={{ display: 'grid', gridGap: '1rem' }}>
			<Search label="Search w/Icon" />
			<Search label="Search w/Button" showSearch="button" />
			<Search label="Search w/Button & Text" showSearch="button-with-text" />
		</div>
	);
}

With items

Result

Loading...

Live Editor

function Example() {
	const items = [
		{ value: 'One' },
		{ value: 'Two' },
		{ value: 'Three' },
		{ value: 'Four' },
		{ value: 'Five' },
	];

	const [selectedKey, setSelectedKey] = useState(items[0].value);

	return (
		<Search defaultItems={items} selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
			{(item) => <Item key={item.value}>{item.value}</Item>}
		</Search>
	);
}

With filters

Result

Loading...

Live Editor

const filterOptions = [
	{
		name: 'First Name',
		value: 'firstName',
	},
	{
		name: 'Last Name',
		value: 'lastName',
	},
	{
		name: 'Email',
		value: 'email',
	},
	{
		name: 'Username',
		value: 'username',
	},
];

const items = [
	{ value: 'One' },
	{ value: 'Two' },
	{ value: 'Three' },
	{ value: 'Four' },
	{ value: 'Five' },
];

function Example() {
	const [filter, setFilter] = useState(filterOptions[0].name);

	return (
		<Search
			filterOptions={filterOptions}
			filterTitle={filter}
			defaultItems={items}
			onChange={console.log}
			onFilterChange={(nextFilter) =>
				setFilter(filterOptions.find(({ value }) => value === nextFilter).name)
			}
			onSelectionChange={console.log}
		>
			{(item) => <Item key={item.value}>{item.value}</Item>}
		</Search>
	);
}

render(<Example />);

Analytics

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

export default {
	value: 'Search',
	actions: {
		onSearchButtonClick: { type: 'SEARCH_BUTTON_CLICK', payload: 'Click' },
		onChange: { type: 'SEARCH_CHANGE', payload: 'Change' },
		onFilterChange: { type: 'SEARCH_FILTER_CHANGE', payload: 'Change' },
		onSelectionChange: { type: 'SEARCH_SELECTION_CHANGE', payload: 'Change' },
	},
};

Props