unform v1.2.3

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
  • Nested fields
  • Initial data

Guides

Basics

import React from "react";
import { Form, Field } from "unform";

function App() {
  function handleSubmit(data) {
    console.log(data);

    /**
     * {
     *   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

import React from "react";
import { Form, Field } from "unform";

function App() {
  function handleSubmit(data) {
    console.log(data);

    /**
     * {
     *   name: 'Diego',
     *   address: { street: "Name of street", number: 123 }
     * }
     */
  };

  return (
    <Form onSubmit={this.handleSubmit}>
      <Field name="name" />

      <Scope path="address">
        <Field name="street" />
        <Field name="number" />
      </Scope>

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

Initial data

import React from "react";
import { Form, Field } from "unform";

function App() {
  const initialData = {
    name: 'John Doe',
    address: {
      street: 'Sample Avenue',
    },
  }

  function handleSubmit(data) {};

  return (
    <Form onSubmit={this.handleSubmit}>
      <Field name="name" />

      <Scope path="address">
        <Field name="street" />
        <Field name="number" />
      </Scope>

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

Contribute

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

License

MIT © Rocketseat