@pijma/select v2.1.1

@pijma/select

Select component

Installation

yarn add @pijma/select

npm i @pijma/select

Usage

import { useState } from 'react'
import { Select, SelectStylesB2cFactory } from '@pijma/select'
import { ThemeProvider } from '@pijma/theme-provider'
import { light } from '@pijma/theme-b2c'

const App = () => {
      const options = [
        { text: "First", value: {id: 1} },
        { text: "Second", value: {id: 2} },
        { text: "Third", value: {id: 3} },
        { text: "Fourth", value: {id: 4} },
        { text: "Fifth", value: {id: 5} },
        { text: "six", value: {id: 6} },
        { text: "Seven", value: {id: 7} },
        { text: "Eight", value: {id: 8} },
        { text: "Nine", value: {id: 9} },
        { text: "Ten", value: {id: 10} },
      ]
      const [value, setValue] = useState<SelectOption[]>([])
          const handleChange = (option: React.SetStateAction<SelectOption | undefined>) => {
        setValue(option)
      }
  return (<ThemeProvider theme={light} components={{Select: SelectStylesB2cFactory}}>
    <Select
        options={options}
        value={value}
        onChange={handleChange}
        title={'select'}
    />
</ThemeProvider>}
)

multiple

import { useState } from 'react'
import { Select, SelectStylesB2cFactory } from '@pijma/select'
import { ThemeProvider } from '@pijma/theme-provider'
import { light } from '@pijma/theme-b2c'

const App = () => {
      const options = [
        { text: "First", value: {id: 1} },
        { text: "Second", value: {id: 2} },
        { text: "Third", value: {id: 3} },
        { text: "Fourth", value: {id: 4} },
        { text: "Fifth", value: {id: 5} },
        { text: "six", value: {id: 6} },
        { text: "Seven", value: {id: 7} },
        { text: "Eight", value: {id: 8} },
        { text: "Nine", value: {id: 9} },
        { text: "Ten", value: {id: 10} },
      ]
      const [value, setValue] = useState<SelectOption[]>([])
          const handleChange = (option: React.SetStateAction<SelectOption | undefined>) => {
        setValue(option)
      }
  return (<ThemeProvider theme={light} components={{Select: SelectStylesB2cFactory}}>
    <Select
        multiple
        options={options}
        value={value}
        onChange={handleChange}
        title={'select'}
    />
</ThemeProvider>}
)

See more on Storybook