🔧 Installation

$ npm i jd-react-select --save

📖 Usage

Import the component

import { Select } from 'jd-react-select';
import '@/../jd-react-select/dist/components/Select.css';
import { SelectOption } from '@/../jd-react-select/dist/components/Select';

Now, you can use it:

Single Select (when you just want to select one value at a time)

1. Create your array of objects

example:

const options = [
 { label: 'First', value: 1 },
 { label: 'Second', value: 2 },
 { label: 'Third', value: 3 },
 { label: 'Fourth', value: 4 },
 { label: 'Fifth', value: 5 },
];

2. Ceate a useState to set the selected value

example:

const [value2, setValue2] = useState<SelectOption | undefined>(options[0]);

If you want to have a default value be selected when you component initializes, you can set the default state to (options[0]) to have the initial value of the select component be the first value in the options array.

<Select options={options} value={value} onChange={(value) => setValue(value)} />

Multi Select (when you want to select multiple elements)

1. Create your array of objects

example:

const options = [
 { label: 'First', value: 1 },
 { label: 'Second', value: 2 },
 { label: 'Third', value: 3 },
 { label: 'Fourth', value: 4 },
 { label: 'Fifth', value: 5 },
];

2. Ceate a useState to set the selected value

example:

const [value, setValue] = useState<SelectOption[]>([options[0]]);

If you want to have a default value be selected when you component initializes, you can set the default state to (options[0]) to have the initial value of the select component be the first value in the options array.

<Select
	multiple
	options={options}
	value={value}
	onChange={(value) => setValue(value)}
/>

To let the component know you want to have multiple selected values, pass in the multiple parameter.

Optional values

This is a list of optional values you can add to your objects

Avatar

If an avatar url is provided, an avatar will appear to the right of the option label.

const options = [
 { label: 'First', value: 1, avatar: imageURL },
];

Id

By default the key for the object will be its value, you can override this by including an id. The id can be either a string or number.

const options = [
 { label: 'First', value: 1, id: string | number },
];

Props

options: {Array}

Default: []

Description: An array of strings or objects to be used as dropdown items. If you are using an array of objects, ensure you have a label key. e.g [{label: 'Label', value: 'Value'}]).

value: {String|Object}

Default: null

Description: Specifies the currently selected item. value can be from list or manually set.

multiple: boolean

Default: false

Description: Specifies the if the select component can have multiple values selected at once.

avatars: boolean

Default: false

Description: Specifies the if the select component options can have avatars. For multi select components where this is true, an avatar will also be added to the option-badge for selected options.

divider: boolean

Default: false

Description: Specifies the if the select component has a divider line to the left of the down arrow.

🖌️ Add custom styles

You can fully customize the styles for the select component by targeting the class names in your stylesheet.

example:

.container
// Overwrite the select container

Since there are a lot of classnames, instead of writing them all here, inspect the select component in your DevTools to see all the classes!

👀 Examples

⚡️ jd-react-select on CodeSandbox