@thaddeusjiang/react-hook-form

Welcome to @thaddeusjiang/react-hook-form 👋

Out of box form input components via react-hook-form and daisyUI

🏠 Homepage

Demo

Features

• [x] Basic Inputs, e.g. Input, InputNumber, Select, Checkbox, Radio, Switch
• [x] Support react-hook-form v7 and daisyUI v2
• [x] Super easy to use

Install

npm install @thaddeusjiang/react-hook-form

Usage

export const Profile = () => {
  const formMethods = useForm();

  const onSubmit = (data) => console.debug(data);

  return (
    <FormProvider {...formMethods}>
      <form onSubmit={formMethods.handleSubmit(onSubmit)}>
        <Field name="firstName">
          <Input id="firstName" name="firstName" />
        </Field>
        <Field name="lastName">
          <Input id="lastName" name="lastName" />
        </Field>
        <Field name="age">
          <InputNumber id="age" name="age" />
        </Field>

        <button type="submit">Save</button>
      </form>
    </FormProvider>
  );
};

More examples: storybook

Apply Styles

if you don't use Tailwind CSS

import { SortableList } from '@thaddeusjiang/react-hook-form';
import '@thaddeusjiang/react-hook-form/dist/index.css';
<SortableList ... />

if you use Tailwind CSS

import { SortableList } from '@thaddeusjiang/react-hook-form';
<SortableList ...>

modify tailwind.config.js

// tailwind.config.js
+ const path = require("path");
module.exports = {
  content: [
    "./src/**/*{js,ts,jsx,tsx}",
+    path.join(
+      require.resolve("@thaddeusjiang/react-hook-form"),
+      "../**/*.{js,ts,jsx,tsx}"
+    ),
  ],
  theme: {},
  plugins: [],
};

Run tests

npm run test

Author

👤 Thaddeus Jiang

• Website: https://thaddeusjiang.com/
• Twitter: @ThaddeusJiang
• Github: @ThaddeusJiang

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2023 Thaddeus Jiang.

This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator