Unform is a performance focused library that helps you creating beautiful forms in React with the power of uncontrolled components performance and React Hooks.
- Beautiful syntax;
- React Hooks 😍;
- Performance focused;
- Use of uncontrolled components;
- Integration with pickers, dropdowns and other libraries;
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 losing performance.
- Native checkbox/radio support;
- Styled components support;
- React Native support (should we?);
- Better docs;
Just add unform to your project:
yarn add @rocketseat/unform
import React from "react";
import { Form, Input } from "@rocketseat/unform";
function App() {
function handleSubmit(data) {
console.log(data);
/**
* {
* email: '[email protected]',
* password: "123456"
* }
*/
};
return (
<Form onSubmit={handleSubmit}>
<Input name="email" />
<Input name="password" type="password" />
<button type="submit">Sign in</button>
</Form>
);
}import React from "react";
import { Form, Input, Scope } from "@rocketseat/unform";
function App() {
function handleSubmit(data) {
console.log(data);
/**
* {
* name: 'Diego',
* address: { street: "Name of street", number: 123 }
* }
*/
};
return (
<Form onSubmit={handleSubmit}>
<Input name="name" />
<Scope path="address">
<Input name="street" />
<Input name="number" />
</Scope>
<button type="submit">Save</button>
</Form>
);
}import React from "react";
import { Form, Input, Scope } from "@rocketseat/unform";
function App() {
const initialData = {
name: 'John Doe',
address: {
street: 'Sample Avenue',
},
}
function handleSubmit(data) {};
return (
<Form onSubmit={handleSubmit} initialData={initialData}>
<Input name="name" />
<Scope path="address">
<Input name="street" />
<Input name="number" />
</Scope>
<button type="submit">Save</button>
</Form>
);
}import React from "react";
import { Form, Input } from "@rocketseat/unform";
import * as Yup from 'yup';
const schema = Yup.object().shape({
email: Yup.string()
.email('Custom invalid email message')
.required('Custom required message'),
password: Yup.string().min(4).required(),
})
function App() {
function handleSubmit(data) {};
return (
<Form schema={schema} onSubmit={handleSubmit}>
<Input name="email" />
<Input name="password" type="password" />
<button type="submit">Save</button>
</Form>
);
}- 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
MIT © Rocketseat
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent