@formulaik/react NPM

Formulaik React JS Engine

Visit The Formulaik project to get started with Formulaik.

Formulaik official react engine.

npm.io

The Formulaik project is an open source initiative for defining cross-platform forms, enabling reusable components in a JSON based declarative approach. Formulaik aims to simplify form building across various front-end frameworks. Formulaik defines a protocol for defining form inputs as a sole source of truth (data type, behaviour, validation) in json, which is interpreted by a platform-specific formulaik engine.

Install

Install the React formulaik engine

npm install @formulaik/react

Install a React Formulaik component library The Mui component library for example

npm install @formulaik-community/formulaik-mui-react

Usage

Create your inputs and create the form using formulaik:

import Formulaik from '@formulaik/react'
import FormulaikMui from '@formulaik-community/formulaik-mui-react'

const inputs = [
 {
      component: 'input',
      id: 'email',
      label: 'Email',
      type: "string",
      params: {
        type: 'email',
        placeholder: "email@domain.com"
      },
      validations: [
        {
          kind: "format",
          value: "email",
          message: 'Invalid email format',
        },
        {
          kind: "required",
          value: true,
          message: "This field can't be blank",
        },
      ],
    },
    {
      component: 'inputPassword',
      label: 'Password',
      id: 'password',
      type: "string",
      params: {
        autoComplete: "current-password",
        placeholder: "xxxx-xxxx-xxxx"
      },
      validations: [
        {
          kind: "required",
          value: true,
          message: "This field can't be blank",
        },
        {
          kind: "matches",
          value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/,
          message: 'Invalid password, must contain at least 8 characters and at most 18 characters',
        },
      ]
    },
    {
      component: 'submit',
      id: 'submit',
      params: {
        text: 'Continue'
      }
    },
]

export default (props) => {
 const onSubmit = async (values) => {
    const { email, password } = values
    try {
      await myapi.submit({ email, password })
    }
    catch(e) {
      throw (new Error('Could not sign in: ', e.message))
    }
    return { message: t("Email validated") }
  }

  const values = {
      email: cookies.get('email'),
  }

  return <>
      <h3>Login</h3>
      <Formulaik
        components={[FormulaikMui]}
        values={values}
        inputs={inputs}
        onSubmit={onSubmit}
         />
    </>
}

Versionning

This repository follows the semantic branching model.

Contributors

Aboubacar Doucouré

This project follows the all-contributors specification. Contributions of any kind welcome! Please contact me if you want to contribute to the core frameworks or add a components library.