Storybook | Chromatic | CHANGELOG | npm

react-hook-form-paste

If you require react-hook-form v6, use the last supported release version.

Super-charged Paste components using react-hook-form to handle form state.

This library lightly wraps Paste components to seamlessly integrate with react-hook-form, and handle abstraction wherever needed.

Getting started

yarn install react-hook-form-paste

Usage

import { Alert } from '@twilio-paste/core/alert';
import { Box } from '@twilio-paste/core/box';
import { Button } from '@twilio-paste/core/button';
import { Label } from '@twilio-paste/core/label';
import { Stack } from '@twilio-paste/core/stack';
import { useForm } from 'react-hook-form';
import { Input } from 'react-hook-form-paste';

interface IFormProps {
  emailAddress: string;
}

export const Basic: React.FC = () => {
  const { register, handleSubmit } = useForm<IFormProps>();

  return (
    <form
      onSubmit={handleSubmit((payload) => {
        window.alert(JSON.stringify(payload));
      })}
    >
      <Stack orientation="vertical" spacing="space80">
        <Box>
          <Label htmlFor="emailAddress">Email Address</Label>
          <Input {...register('emailAddress')} type="email" placeholder="[e-mail]" />
        </Box>

        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Stack>
    </form>
  );
};

Differences between react-hook-form-paste and Paste

With the advent of react-hook-form v7, react-hook-form-paste is mostly unnecessary; form type-safety is mostly ensured via the new {...register('formField')} pattern which natively work with Paste components. However, there are still some Paste components with more complex state such as OptionGroup. For these components, static form-typing can be enforced by passing in an interface into the generic component e.g. <OptionGroup<IFieldProps>>. This will constrain the name field to only keys of that interface.

Core Components

Component	Props
Checkbox	CheckboxProps
CheckboxDisclaimer	CheckboxDisclaimerProps
CheckboxGroup	{ name } & CheckboxGroupProps
Input	InputProps
Option	OptionProps
OptionGroup	OptionGroupProps
Radio	RadioProps
RadioGroup	{ name, controllerProps } & RadioGroupProps
Select	SelectProps
TextArea	{ name, controllerProps } & TextAreaProps

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Acknowledgements

Heavily inspired by formik-antd.

License

MIT