@truefit/bach-react-hook-form v2.3.0

@truefit/bach-hook-form

This library allows components composed with @truefit/bach to idiomatically use React Hook Form

Installation

npm install @truefit/bach-react-hook-form react-hook-form

or

yarn add @truefit/bach-react-hook-form react-hook-form

Enhancers

withForm

Allows you access to the form methods from react hook form.

Helper Signature

Example

Typescript

import React from 'react';
import {compose, withCallback} from '@truefit/bach';
import {withForm, UseFormReturn} from '@truefit/bach-react-hook-form';

type FormValues = {
  name: string;
  address: string;
  age: number;
};

type Props = {
  formContext: UseFormReturn<FormValues>;
  onSubmit: (values: FormValues) => void;
};

const WithForm = ({formContext: {register, handleSubmit}, onSubmit}: Props) => (
  <div>
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      <input {...register('address')} />
      <input {...register('age')} />

      <button type="submit">
        Submit
      </button>
    </form>
  </div>
);

const onSubmit = () => (values: FormValues) => {
  console.log(values);
};

export default compose(
  withCallback('onSubmit', onSubmit),
  withForm({
    defaultValues: {name: 'John Doe', address: '', age: 0},
  }),
)(WithForm);

Javascript

import React from 'react';
import {compose, withCallback} from '@truefit/bach';
import {withForm} from '@truefit/bach-react-hook-form';

const WithForm = ({formContext: {register, handleSubmit}, onSubmit}) => (
  <div>
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      <input {...register('address')} />
      <input {...register('age')} />>

      <button type="submit">
        Submit
      </button>
    </form>
  </div>
);

const onSubmit = () => (values) => {
  console.log(values);
};

export default compose(
  withCallback('onSubmit', onSubmit),
  withForm({
    defaultValues: {name: 'John Doe', address: '', age: 0},
  }),
)(WithForm);

React Hook Form Hook useForm

withFormContext

Allows you access to the form methods from a component that is nested lower in the structure than the declaration of the form.

Example

Typescript

import React from 'react';
import {compose} from '@truefit/bach';
import {withFormContext, UseFormReturn} from '@truefit/bach-react-hook-form';

type FormValues = {
  name: string;
  address: string;
  age: number;
};

type Props = {
  formContext: UseFormReturn<FormValues>;
};

const WithFormContext = ({formContext: {register}}: Props) => (
  <div>
    <input {...register('name')} />
    <input {...register('address')} />
    <input {...register('age')} />
  </div>
);

export default compose(
  withFormContext(),
)(WithFormContext);

Javascript

import React from 'react';
import {compose} from '@truefit/bach';
import {withFormContext} from '@truefit/bach-react-hook-form';

const WithFormContext = ({formContext: {register}}) => (
  <div>
    <input {...register('name')} />
    <input {...register('address')} />
    <input {...register('age')} />
  </div>
);

export default compose(
  withFormContext(),
)(WithFormContext);

React Hook Form Hook useFormContext

withWatch

Wraps useWatch ... see useWatch.

Accepts static configuration or a lazy eval function

withFieldArray

Wraps useFieldArray ... see useFieldArray.

Accepts static configuration or a lazy eval function