How to use renderOption?

[TheGP]

There is no source code at https://react-select-search.com/?path=/story/custom--avatar-example

[LukeV111]

Did you figure this out @TheGP ?

[TheGP]

@LukeV111 Yes: https://react-select.com than u can just search anything and there are a lot of examples on StackOverflow for any question

[otox-rz]

Hi guys, I think you should check on this

function renderFriend(props, option, snapshot, className) {
    const imgStyle = {
        borderRadius: '50%',
        verticalAlign: 'middle',
        marginRight: 10,
    };

    return (
        <button {...props} className={className} type="button">
            <span><img alt="" style={imgStyle} width="32" height="32" src={option.photo} /><span>{option.name}</span></span>
        </button>
    );
}

export const AvatarExample = () => (
    <SelectSearch
        className="select-search select-search--multiple"
        options={friends}
        renderOption={renderFriend}
        multiple
        search
        filterOptions={fuzzySearch}
        placeholder="Search friends"
    />
);

@LukeV111 Yes: https://react-select.com than u can just search anything and there are a lot of examples on StackOverflow for any question

I think this library has very small package size. We can compare it here

https://bundlephobia.com/scan-results?packages=react-select,react-select-search

[tbleckert]

I will improve the storybook as soon as possible, but just a reminder that all code is here on github. All stories/examples can be found here https://github.com/tbleckert/react-select-search/tree/main/stories