1.10.1 • Published 2d ago

@formulaik/react

Licence

ISC

Version

1.10.1

Deps

Size

141 kB

Vulns

Weekly

Stars

Summary Dependency Versions

Formulaik React JS Engine

Visit The Formulaik project to get started with Formulaik.

Formulaik official react engine.

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}
         />
    </>
}

Bundle size

The default package entry and the @formulaik/react/core subpath keep the same behavior: they auto-generate a Yup schema from inputs when validationSchema is not provided.

If you want a smaller consumer bundle, use the lighter subpath exports:

import Formulaik from '@formulaik/react/core'

export default () => {
  return (
    <Formulaik
      components={[FormulaikMui]}
      values={values}
      inputs={inputs}
      onSubmit={onSubmit}
    />
  )
}

Available subpath exports:

@formulaik/react/core: same form behavior as the default export, available as a dedicated subpath
@formulaik/react/cache: cache class only

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.