CODEWITHSUNDEEP
reactjstypescriptreact-select
sbuck89
sbuck89

Reputation: 133

how to change react-select style options with TypeScript

I am trying to change the style options for my react-select component (specifically trying to get rid of the border and change the font and text color) but am not sure how to fix the TypeScript errors. I have the following code:

import React, {useState} from 'react';
import Select, { ValueType } from 'react-select';

type OptionType = {
    value: string;
    label: string;
  };

const LanguageSelector = () => {
    const languageOptions: OptionType[] = [
        { value: 'English', label: 'EN' },
        { value: 'German', label: 'DE' },
        { value: 'French', label: 'FR' },
      ];
    const [selectedOption, setSelectedOption] = useState<ValueType<OptionType, false>>(languageOptions[0]);
    const handleChange = (option: ValueType<OptionType, false>) => setSelectedOption(option);
    const customStyles = value => ({
        control: (provided, state) => ({
          ...provided,
          alignItems: "baseline",
          backgroundColor: value ? "gray" : "white"
        })
      });

    return (
    <div>
        <Select
            value={selectedOption}
            onChange={handleChange}
            options={languageOptions}
            styles={customStyles}
        />
    </div>
    )
};

export default LanguageSelector;

The errors are that provided, state, and value all implicitly have an 'any' type. I'm assuming provided would have type CSSProperties, but am unsure about state. Does anyone know what these types should be?

Upvotes: 1

Views: 5083

Answers (1)

Benedek Simo
Benedek Simo

Reputation: 514

First of all, I think you don't need the customStyles to be a function (as you are not using the value at all.)

Secondly, can add type to your customStyles with StylesConfig type, which expects OptionType, false as two generics.

const dropdownStyles: StylesConfig<OptionType, false> = {
  container: (provided) => ({
    ...provided,
    flexGrow: 1,
  }),
  control: (provided) => ({
    ...provided,
    background: '#fff',
    borderColor: '#9e9e9e',
    minHeight: '24px',
  }),
}

As a plus, you could even use OptionTypeBase from their types if you don't have extra properties in your options array's properties.

Upvotes: 1

Related Questions