jd-react-select v1.1.9

🔧 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 (options0) 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 (options0) 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