Skip to main content

Introduction

Typesafe and simple implementation of polymorphic Smart component component for react-hook-form package.

Motivation​

If you are here I suppose you use react-hook-form to work with your forms. Have you heard about Smart components? It's really cool approach - magic 🪄 just happens.

Main purpose of this project is to make this pattern easy to integrate with your current codebase by combining polymoprhic and Smart Component approaches.

Installation​

hookform-input is available as an NPM package:

pnpm add hookform-input
info

This package is an extension to react-hook-form so you need to have it pre-installed

Start coding 👨‍💻​

Bare minimum to start with!

import { FormInput } from "hookform-input";
import { FormProvider, useForm } from "react-hook-form";

const NameForm = () => {
  const form = useForm();

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

  return (
    <FormProvider {...formData}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormInput name="username" />

        <Button type="submit">Submit</Button>
      </form>
    </FormProvider>
  );
};