Documentation

Custom select for react components

How to use it

Import components from @fajrindev/custom-select library Install package using npm:

npm i @fajrindev/custom-select

now import export default component:

import SelectDropdown from "@fajrindev/custom-select";

render in react component:

const YourComponent = () => {
  return (
    <SelectDropdown
      withSearch={true}
      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:

setState(result as []) // "result" types is []

Table Props

| 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 |

Styling

You may want to change the way option to be renderd in components

• Create your own components

    const Menu = ((props: OptionPropsList) => {
      return (
        <div className="bg-[salmon] text-[16px]">
          <components.Option {...props}>{props.children}</components.Option>
        </div>
      );
    }) 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":

.custom-select-marked-highlight-color {
  background-color: #4eb2ab;
  // another style here
}

if you are using typescript you may want to import types:

import { OptionMenuList, OptionPropsList } from "@fajrindev/custom-select";

also components:

import { components } from "@fajrindev/custom-select";

See demo and storybook doc url below:

• Demo
• Storybook