React Select

There are few options on how to include/import React Select into your project.

Install from NPM

Install the React Select Js library from command prompt from the root directory of the project:

npm i react-select

Import the React Select package.

import Select, { SingleValue, MultiValue } from 'react-select';

Below the example how to use the package and make it working React Select on any page.

React Select For Single value Select

const [statusOption, setStatusOption] = useState<SingleValue<OptionType> | null>(null);
   
    const status: OptionType[] = [
      { label: 'Published', value: 'Published' },
      { label: 'Coming Soon', value: 'Coming Soon' },
      { label: 'Expired', value: 'Expired' }
    ];

    const handleStatusChange = (selected: SingleValue<OptionType>) => {
       ...
    };

   <div className="col-span-6">
        <label className="form-label">Status</label>
        <Select
            options={status}
             onChange={handleStatusChange}
            value={statusOption}
        />
        <input
        type="hidden"
        {...register('status', { required: 'status is required.' })} 
        />
        {errors.status && (
            <span className="text-red-500">{errors.status.message}</span>
        )}
  </div> 

React Select For MultiValue Select

const [selectedContributors, setSelectedContributors] = useState<MultiValue<OptionType>>([]);

const contributorsOptions: OptionType[] = [
    { label: 'Declan Grieve', value: 'Declan Grieve', image: '/assets/images/avatar/user-1.png' },
    { label: 'Callum Burston', value: 'Callum Burston', image: '/assets/images/avatar/user-2.png' },
    { label: 'Liam White', value: 'Liam White', image: '/assets/images/avatar/user-3.png' },
    { label: 'Sophia Adams', value: 'Sophia Adams', image: '/assets/images/avatar/user-4.png' },
    { label: 'Ethan Thompson', value: 'Ethan Thompson', image: '/assets/images/avatar/user-5.png' },
    { label: 'Ava Wilson', value: 'Ava Wilson', image: '/assets/images/avatar/user-6.png' }
];

const handleContributorsChange = (selected: MultiValue<OptionType>) => {
    ...
};

<div className="col-span-12">
    <label className="form-label">Contributors</label>
    <Select
        options={contributorsOptions}
        isMulti
        onChange={handleContributorsChange}
        value={selectedContributors}
    />
    <input
        type="hidden"
        {...register('contributors', { required: 'Contributors is required.' })} 
    />
    {errors.contributors && (
        <span className="text-red-500">{errors.contributors.message}</span>
    )}
</div>