Skip to content
🐜 React forms with easy validation and multi steps
JavaScript
Branch: master
Clone or download
Latest commit ee852f7 Feb 9, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update issue templates Dec 10, 2019
docs v1.0.0-rc.9 Feb 9, 2020
examples v1.0.0-rc.9 Feb 9, 2020
packages v1.0.0-rc.9 Feb 9, 2020
.eslintrc fix(all): Fix lint errors Jan 26, 2020
.gitignore feat(core): Add id by field Sep 8, 2019
LICENSE Create LICENSE Dec 10, 2019
README.md fix(docs): Update readme Nov 24, 2019
lerna.json v1.0.0-rc.9 Feb 9, 2020
netlify.toml feat(examples): Add netlify configuration Nov 5, 2019
package.json fix(all): Update dependencies Feb 4, 2020
yarn.lock fix(all): Update dependencies Feb 4, 2020

README.md

Welcome to 🐜 Formiz

React forms with easy validation and multi steps

Tests Badge

πŸ§™β€ Multi steps forms

Multi steps form logic available out of the box! No more pain to build perfect UX for complex forms.

βœ… Easy form validation

Create forms in React with full validation without the pain. Turn everything into a custom field with full validation!

πŸ› No more logic duplication

Don't duplicate your logic between display and validation. Validation is enabled only if the field is displayed.

πŸ’… Forms with your own UX

Choose how to render validations, form buttons, and navigation between steps (wizard, tabs, other). It's your choice!

βš›οΈ Built with hooks

Use hooks & cut the complexity to create custom fields :) Use complex logic without even thinking of it.

πŸ“± React Native compatible

You can use it with React Native. Just use the as={View} property on <FormizStep> component to replace the div.

Getting started

Looking for the documentation?

Visit formiz-react.com for full documentation and live demos.

Looking for examples?

Visit documentation for live demos.

Visit formiz-examples.netlify.com for examples with Chakra UI.

Concept

The idea behind Formiz is to allow you to build advanced forms with multiple steps, complex validations and a good UX without pain.

The main idea is to build fields as independent reusable components. Fields can be anything, not just inputs. Once you have built your fields, you can use them everywhere.

When you use a field built with Formiz, you can apply validations rules on it. Only the mounted fields will apply their validation to the current step and to the form.

// Example
<MyField
  name="email"
  type="email"
  required="Email is required"
  validations={[
    {
      rule: isEmail(),
      message: 'Not a valid email',
    }
  ]}
/>

Formiz core does not provide any styles, so you can use it with any UI library and style you want. Use it with Chakra UI, ReactStrap, Material UI or your own styles.

Contributing

Feel like contributing? That's awesome!

Follow the flowing guide to run the project locally.

Install dependencies

This project use Yarn and Lerna.

This is needed the ** the first time** you get the project to install all dependencies.

yarn

Bootstrap the repo with Lerna

This is needed the ** the first time** you get the project to link local packages together.

yarn bs

Start documentation

yarn start

Run test in dev

yarn test:dev

This can be a little hard to see test results with this command.

So instead you can go in each packages folders and run tests from here.

cd packages/core
yarn test:dev
You can’t perform that action at this time.