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

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

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

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