react-ts-controlled-select

React controlled Select

This is a React controlled select.

How to install

npm i react-ts-controlled-select

Interfaces

interface IOption {
  label: string
  value: string
}

interface ISelectProps {
  options: IOption[]
  selected: IOption
  setSelected: React.Dispatch<React.SetStateAction<IOption>>
}

Usage

This component require 3 props to work:

interface ISelectProps {
  options: IOption[]
  selected: IOption
  setSelected: React.Dispatch<React.SetStateAction<IOption>>
}

interface IOption {
  label: string
  value: string
}

const option = {
  label: 'Option label',
  value: 'option value'
}

A set of options look like this:

const options = [
  {
    label: 'Option 1',
    value: 'value 1'
  },
  {
    label: 'Option 2',
    value: 'value 2'
  }
]

Example:

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

const ParentComponent = () => {

  const currentOptions = [
    {
      label: 'Option 1',
      value: 'one'
    },
    {
      label: 'Option 2',
      value: 'two'
    },
  ]
  const [selectedOption, setSelectedOption] = useState(currentOptions[0])

  return <Select options={currentOptions} selected={selectedOption} setSelected={setSelectedOption} />
}