@seragam-ui/autocomplete v0.4.1

@seragam-ui/autocomplete

A Quick description of the component

Installation

yarn add @seragam-ui/autocomplete
# or
npm i @seragam-ui/autocomplete

How to use

This example shows how to use the component with React Hook Form.

import { Autocomplete } from '@seragam-ui/autocomplete'
import { useForm } from 'react-hook-form'

const App = () => {
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm({
    mode: 'onChange',
  })

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

  React.useEffect(() => {
    // For this component, we need manually register when app rendered
    register('user', {
      required: {
        value: true,
        message: 'Wajib pilih guru',
      },
    })
  }, [register])

  return (
    <div
      style={{
        width: '35vw',
      }}
    >
      <form onSubmit={handleSubmit(onSubmit)}>
        <Autocomplete
          placeholder="Cari guru..."
          items={people}
          customList={CustomList}
          name="user"
          isInvalid={!!errors.user}
          errorMessage={errors.user?.message}
          helperText="Pilih salah satu"
          onChange={(value) => {
            // this is needed to set the value to the form manually
            setValue('user', value)
          }}
        />
        <Button type="submit" fullWidth style={{ marginTop: 12 }}>
          Submit
        </Button>
      </form>
    </div>
  )
}

Custom List Item

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

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

import {
  Autocomplete,
  AutocompleteProps,
  CustomListProps,
  CheckmarkIcon,
} from '../src'

const MyAwesomeCustomList = (props: CustomListProps) => {
  return (
    <>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <img
          src={props.item.imageUrl}
          alt={props.item.name}
          style={{
            borderRadius: '50%',
            width: 24,
            height: 24,
            marginRight: 12,
          }}
        />
        <span
          style={{
            fontWeight: props.selected ? 'bold' : 'normal',
          }}
        >
          {props.item.name}
        </span>
      </div>

      {props.selected && (
        <span
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            bottom: 0,
            paddingRight: 16,
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <CheckmarkIcon color={props.active ? 'blue' : 'white'} />
        </span>
      )}
    </>
  )
}

const App = () => {
  return (
    <div>
      <Autocomplete customList={MyAwesomeCustomList} {...otherProps} />
    </div>
  )
}