Storybook | Chromatic | CHANGELOG | npm

react-hook-form-paste

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

This library lightly wraps Paste components with required fields name: string and registerRef: React.Ref props that connect them to a react-hook-form useForm hook. This will link the Paste component to the form library, allowing you to reap the benefits of typed, performant forms with minimal effort.

Getting started

yarn install react-hook-form-paste

Usage

import { Theme } from '@twilio-paste/core/theme';
import { Button } from '@twilio-paste/core/button';
import { Label } from '@twilio-paste/core/label';
import * as React from 'react';
import { useForm } from 'react-hook-form';
import { Input } from 'react-hook-form-paste';

export default {
  title: 'Input',
};

interface ITestProps {
  emailAddress: string;
}

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

  return (
    <Theme.Provider theme="default">
      <form
        onSubmit={handleSubmit((payload) => {
          window.alert(JSON.stringify(payload));
        })}
      >
        <Label htmlFor="emailAddress">Email Address</Label>
        <Input<ITestProps>
          id="emailAddress"
          name="emailAddress"
          type="email"
          placeholder="example@twilio.com"
          registerRef={register}
        />

        <Button variant="primary" type="submit">
          Submit
        </Button>
      </form>
    </Theme.Provider>
  );
};

Differences between react-hook-form-paste and Paste

react-hook-form-paste also provides TypeScript developers the option of typing their form inputs. Passing in an interface into a form input e.g. <Input<ITestProps>> will constrain the name field to only keys of that interface.

Core Components

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

Using registerRef over ref

Currently, while using TypeScript there is incompatibility with React.forwardRef in that it does not allow the components to be generic with a forwarded ref. Because of this, we have to pass a ref into a HoC under a different name than ref. This lets us pass refs and still be able to type the name fields.

typescript-cheatsheets/react#106 (comment) https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

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