@reactleaf/input

Variable Input components

See on Storybook

Usage

pnpm add @reactleaf/input

import TextInput from "@reactleaf/input/TextInput"

function YourComponent() {
  const [value, setValue] = useState()
  return <TextInput value={value} onValueChange={setValue} />
}

Use with hook-form-ready components

Install react-hook-form

pnpm add @reactleaf/input react-hook-form

import useForm, { FormProvider } from "react-hook-form"
import TextInput from "@reactleaf/input/TextInput/hookform"

function YourComponent() {
  const form = useForm()
  return (
    <FormProvider {...form}>
      <TextInput name="hook-form-name" />
    </FormProvider>
  )
}

Using Autocomplete, Combobox or DateInput

Autocomplete and Combobox depends on react-select and
DateInput depends on react-datepicker.

pnpm add @reactleaf/input react-datepicker

import DateInput from "@reactleaf/input/DateInput"

function YourComponent() {
  const [value, setValue] = useState()
  return <DateInput value={value} onSelect={setValue} />
}