Learning purpose
npm install @fajrindev/custom-selectCustom select for react components
Import components from @fajrindev/custom-select library
Install package using npm:
``js`
npm i @fajrindev/custom-select
now import export default component:
`js`
import SelectDropdown from "@fajrindev/custom-select";
render in react component:
`js`
const YourComponent = () => {
return (
options={stateOptions}
isMulti={true}
value={value}
onChange={(result) => {
console.log(result); //cast types result as []
}}
/>
);
};
You may have warning if you are using typescript at value for setState hooks, you need to cast args "result" with your value type:
`js`
setState(result as []) // "result" types is []
| Props | Types | Default | Description |
| ----------- | -------- | ---------- | ----------------------------------------- |
| id | string | undefined | Id attribute |
| withSearch | boolean | \*required | To enable search input in list of options |
| isMulti | boolean | \*required | Enable multiselect value |
| options | array | none | Options value list |
| value | array | \*require | Defined value |
| name | string | none | Name attribute input |
| className | string | "" | Style css using classname |
| placeholder | string | "" | Placeholder attribute for input |
| onChange | function | \*require | Handling function for response value |
| style | | | Custom style for input and option |
| optionList | | | Custom component for render option list |
You may want to change the way option to be renderd in components
- Create your own components
`js`
const Menu = ((props: OptionPropsList) => {
return (
);
}) as OptionMenuList;
then you can pass "Menu" component as a props via "optionList"
- You can change mark highlight color using css by className ".custom-select-marked-highlight-color":
`js`
.custom-select-marked-highlight-color {
background-color: #4eb2ab;
// another style here
}
if you are using typescript you may want to import types:
`js`
import { OptionMenuList, OptionPropsList } from "@fajrindev/custom-select";
also components:
`js``
import { components } from "@fajrindev/custom-select";
See demo and storybook doc url below: