No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

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

Define value

name

string

none

Name attribute input

className

string

none

Style css using classname

placeholder

string

none

Placeholder attribute for input

onChange

function

*require

Handling function for response value

style

Custom style for input and option

optionList

OptionMenuList

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 link below: