@thaddeusjiang/react-hook-form
v0.0.2-rc.1
Published
> Out of box form input components via react-hook-form and daisyUI
Downloads
23
Readme
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 anddaisyUI
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