react-hook-form-paste
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Storybook | Chromatic | CHANGELOG | npm

    react-hook-form-paste

    Codacy Badge Known Vulnerabilities codecov

    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="example@twilio.com" />
            </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

    Install

    npm i react-hook-form-paste

    DownloadsWeekly Downloads

    500

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    847 kB

    Total Files

    161

    Last publish

    Collaborators

    • vnguyen94