@reusejs/react-search-select
v0.0.22
Published
Select Dropdown
Downloads
15
Readme
Select Dropdown
<SearchSelect
label={<Label />}
ShowSelected={CustomShowLabel}
dataSource={async (query) => {
let options = await searchUsers(query);
return options;
}}
OptionRenderer={Option}
onChange={(v) => {
console.log("onchange", v);
}}
multiple={true}
clearStyle={<Clear />}
/>
Props:
| Prop | Type/Remarks | | ------------------ | ----------------------------------------------------------------------- | | label | String or React Component | | ShowSelected | to show the selected data in styles (default it will be comma seprated) | | dataSource | [{},{},{}] api data. | | OptionRenderer | Customizable ( can add image, description , and title) | | onChange | It will be called whenever user select or un selects an items | | multiple | true or false | | clearStyle | String or React Component | | defaultSelected | items that should be already selected | | labelWrapperStyles | to style the label of component | | dropdownStyle | to customized styles of dropdown | | inputStyle | to style the text input tag | | placeHolderText | to change the text of placeholder | | optionsStyle | to change style of options in open dropdown | | disabled | to disable the whole component | | customArrow | to customized arrow of dropdown from user side |
Label
Label can be passed as prop that can be a component with styles or a simple string.const Label = () => { return <p style={{ color: "green" }}>Select Status</p>; };```
Clear Text Clear text be passed as prop that can be a component with styles or a simple string.
const Clear = () => { return <p style={{ color: "red" }}>Clear</p>; };```
ShowSelected can be passed from user side to style default selected data. if its not passed then selected data will be comma separated.
const CustomShowLabel = ({ selected }) => { const [text, setText] = useState("None Selected"); useEffect(() => { if (selected.length > 0) { let tempText = selected.map((val) => val.label).join("; "); setText(tempText); } else { setText("None Selected"); } }, [selected]); return <>{text}</>; };```
DataSource to pass data as options, it is used for API data.
const searchUsers = (q = "") => { if (q !== "") { return new Promise((resolve, reject) => { axios .get("https://api.github.com/search/users", { params: { q } }) .then(function (response) { let data = response.data.items.map((i) => { return { value: i.login, label: i.login, avatar: i.avatar_url }; }); resolve(data); }); }); } else { return []; } };
for above implementation prop will be passed like this
dataSource={async (query) => {
let options = await searchUsers(query);
return options;
}}```
- OptionRenderer
to style the options can be customized to add title, image and description.
it will return a jsx element which is a list of options.
const [found, setFound] = useState(false); useEffect(() => { let localFound = selected.some((current) => current.value === value.value); setFound(localFound === false ? false : true); }, [selected]); return ( <div className="p-2 hover:bg-blue-400 cursor-pointer flex flex-row items-center relative"> <span className="flex flex-row items-center"> <img className="h-4 mr-2" src={value.avatar} alt={value.label} /> <span>{value.label}</span> </span> {found === true && ( <span className="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4"> <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" > <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /> </svg> </span> )} </div> ); };```
for selected component user can add a svg of right tick or something else, if data has image or some more details user can also add that.
- onChange onChange prop is used to handle and keep track of selected and unselected data.
- Multiple It can be true and false (default false), if user want multiple selected data user can enable it.