@seragam-ui/select v1.2.3

@seragam-ui/select

Select is a component for selecting options.

Installation

yarn add @seragam-ui/select

npm i @seragam-ui/select

How to use

If you use native select you can use the component as a normal select.

import { Select } from '@seragam-ui/select'

const App = () => {
  const [selected, setSelected] = React.useState('')

  const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelected(e.target.value)
  }

  return (
    <Select onChange={handleChange} value={selected}>
      <option disabled value="">
        Choose
      </option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </Select>
  )
}

This example use <CustomSelect /> shows how to use the component with React Hook Form.

//  Sample data CustomSelect
const people = [
  {
    name: 'Leslie Alexander',
    username: '@lesliealexander',
    imageUrl: 'https://randomuser.me/api/portraits/men/1.jpg',
  },
  {
    name: 'Michael Foster',
    username: '@michaelfoster',
    imageUrl: 'https://randomuser.me/api/portraits/women/12.jpg',
  },
]

import { CustomSelect as Select } from '@seragam-ui/select'
import { useForm } from 'react-hook-form'

const App = () => {
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm({
    mode: 'onChange',
  })
  const [selected, setSelected] = React.useState<OptionItem | null>(null)

  const onSubmit = (data: any) => {
    console.log(data)
    setSelected(data)
  }

  React.useEffect(() => {
    register('user', {
      required: {
        value: true,
        message: 'Kepala sekolah harus dipilih',
      },
    })
  }, [register])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        placeholder="Pilih kepala sekolah"
        options={people}
        name="user"
        onChange={(value) => {
          setValue('user', value)
        }}
        isInvalid={!!errors.user}
        errorMessage={errors.user?.message}
        helperText="Pilih salah satu"
      />
      <Button type="submit" fullWidth style={{ marginTop: 12 }}>
        Submit
      </Button>
    </form>
  )
}

Custom List Item and Custom Display Value

List item and display value not limited from the component library itself, you can adjust the layout based on your needs. Just simply add function component inside customList and customDisplayValue in <CustomSelect /> component.

customList props is a function that will have arguments item, selected and active customDisplayValue props is a function that will have arguments item

import {
  CustomSelect as Select,
  CheckmarkIcon,
  CustomListProps,
} from '@seragam-ui/select'

const MyAwesomeCustomList = (props: CustomListProps) => {
  return (
    <>
      <div>
        <img src={props.item.imageUrl} alt={props.item.name} />
        <span
          style={{
            fontWeight: props.selected ? 'bold' : 'normal',
          }}
        >
          {props.item.name}
        </span>
      </div>

      {props.selected && (
        <span>
          <CheckmarkIcon color={props.active ? 'blue' : 'white'} />
        </span>
      )}
    </>
  )
}

const MyAwesomeCustomDisplayValue = (props: Pick<CustomListProps, 'item'>) => {
  const item = props.item as OptionItem

  return (
    <div style={{ display: 'flex', alignItems: 'center', marginTop: -2 }}>
      <img src={item.imageUrl} alt={item.name} />
      <span>{item.name}</span>
    </div>
  )
}

const App = () => {
  return (
    <Select
      placeholder="Pilih mata pelajaran"
      options={people}
      onChange={(item) => setSelected(item as OptionItem)}
      customList={MyAwesomeCustomList}
      customDisplayValue={MyAwesomeCustomDisplayValue}
    />
  )
}