Formiz

React forms with ease! Composable, headless & with built-in multi steps

FormReactReact NativeValidation
ivan-dalmet/formizformiz-react.com/@formiz/core

README

Welcome to 🐜 Formiz

React forms with ease!


Composable, headless & with built-in multi steps


Tests Badge

🧙‍ Built-in multi steps

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

✅ Composable validations

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

💅 Headless, build your own UX!

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

📋 Turn everything into fields

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

⚛️ Built with Typescript & hooks

Typescript give you nice types out of the box. 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 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.app 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.

  1. ```jsx
  2. // Field Example
  3. <MyField
  4.   name="email"
  5.   type="email"
  6.   required="Email is required"
  7.   validations={[
  8.     {
  9.       rule: isEmail(),
  10.       message: 'Not a valid email',
  11.     }
  12.   ]}
  13. />
  14. ```

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.

  1. ```
  2. yarn
  3. ```

Bootstrap the repo with Lerna


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

  1. ```
  2. yarn bs
  3. ```

Start documentation


  1. ```
  2. yarn start
  3. ```

Run test in dev


  1. ```
  2. yarn test:dev
  3. ```

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.

  1. ```
  2. cd packages/core
  3. yarn test:dev
  4. ```