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

``bash
yarn install react-hook-form-paste
`

Usage

`tsx
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();

return (
onSubmit={handleSubmit((payload) => {
window.alert(JSON.stringify(payload));
})}
>


Email Address




Submit



);
};
`

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. >. 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