@fajrindev/custom-select v0.0.6

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

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