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="[email protected]" />
        </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