Overview
Unform is a performance focused library that helps you creating beautiful forms in React with the power of uncontrolled components performance and React Hooks.
Main advantages
- Beautiful syntax;
- React Hooks 😍;
- Performance focused;
- Use of uncontrolled components;
- Integration with pickers, dropdowns and other libraries;
Why not Formik, Redux Form or another library?
Formik/Redux Form has a really great syntax while it has a really poor support to uncontrolled components and deep nested data structures. With unform it's easy to create forms with complex relationships without loosing performance.
Roadmap
- Native checkbox/radio support;
- Unit tests;
- Setup CI;
- Add more examples;
- Styled components support;
- React Native support (should we?);
- Better docs;
Installation
Just add unform to your project:
yarn add unform
Table of contents
Guides
Basics
;; { { console; /** * { * email: 'email@example.com', * password: "123456" * } */ }; return <Form onSubmit=handleSubmit> <Field name="email" /> <Field name="password" type="password" /> <button type="submit">Sign in</button> </Form> ;}
Nested fields
;; { { console; /** * { * name: 'Diego', * address: { street: "Name of street", number: 123 } * } */ }; return <Form onSubmit=thishandleSubmit> <Field name="name" /> <Scope path="address"> <Field name="street" /> <Field name="number" /> </Scope> <button type="submit">Save</button> </Form> ;}
Initial data
;; { const initialData = name: 'John Doe' address: street: 'Sample Avenue' {}; return <Form onSubmit=thishandleSubmit> <Field name="name" /> <Scope path="address"> <Field name="street" /> <Field name="number" /> </Scope> <button type="submit">Save</button> </Form> ;}
Contribute
- Fork it
- Create your feature branch (git checkout -b my-new-feature)
- Commit your changes (git commit -am 'Add some feature')
- Push to the branch (git push origin my-new-feature)
- Create new Pull Request
License
MIT © Rocketseat