# @formulaik/react

> Formulaik React JS Engine

Latest version **1.10.1** (published 2026-09-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install @formulaik/react
pnpm add @formulaik/react
yarn add @formulaik/react
bun add @formulaik/react
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.10.1 |
| Published | 2026-09-30 |
| First published | 2024-03-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 140.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Formulaik |
| Maintainers | yelounak |
| Keywords | formulaik |

## Links

- npm: https://www.npmjs.com/package/@formulaik/react
- Repository: https://github.com/formulaik-core/react
- Homepage: https://github.com/formulaik-core/react#readme
- Issues: https://github.com/formulaik-core/react/issues
- npm.io page: https://npm.io/package/@formulaik/react

## Dependencies (2)

- [formik](https://npm.io/package/formik.md) >=2.4.6
- [schema-to-yup](https://npm.io/package/schema-to-yup.md) ^1.12.18

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.10.1 (latest) — 2026-09-30
- 1.9.2-beta.1 (beta) — 2026-09-13
- 1.10.0 — 2026-09-29
- 1.9.1 — 2026-08-14
- 1.9.0 — 2026-08-14
- 1.8.2 — 2026-08-14
- 1.8.1 — 2025-03-27
- 1.8.0 — 2024-10-30
- 1.7.1 — 2024-10-10
- 1.7.0 — 2024-09-22
- 1.6.2 — 2024-05-15
- 1.6.1 — 2024-05-15
- 1.6.0 — 2024-03-28
- 1.5.1 — 2024-03-21
- 1.5.0 — 2024-03-21
- … 4 more at https://npm.io/package/@formulaik/react/versions

## README

# Formulaik React JS Engine

[![NPM](https://img.shields.io/npm/v/@formulaik/react.svg)](https://www.npmjs.com/package/formulaik/react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Visit [The Formulaik project](https://formulaik-core.github.io/documentation/) to get started with Formulaik.

Formulaik official react engine.

![](https://formulaik-core.github.io/documentation/img/icon_xs.svg)

> [The Formulaik project](https://formulaik-core.github.io/documentation/) 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

1. Install the React formulaik engine

```bash
npm install @formulaik/react
```

2. Install a React Formulaik component library
The [Mui component library](https://github.com/formulaik-community/formulaik-mui-react) for example

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

## Usage

Create your inputs and create the form using formulaik:

```jsx
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:

```jsx
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
[<img src="https://github.com/adoucoure.png" width="60px;"/>
<br />
<sub>
<a href="https://github.com/adoucoure">Aboubacar Doucouré</a>
</sub>](https://adoucoure.com/formulaik)

This project follows the [all-contributors specification](https://github.com/all-contributors/all-contributors). Contributions of any kind welcome!
Please [contact me](https://adoucoure.com/contact) if you want to contribute to the core frameworks or add a components library.


## License

MIT © [yelounak](https://github.com/yelounak)

## References
- [The Formulaik project documentation](https://formulaik-core.github.io/documentation/)
- [Getting started with Formulaik React 🚀](https://formulaik-core.github.io/documentation/docs/next/gettingstarted/react/installation)
- [Contribute to Formulaik](https://formulaik-core.github.io/documentation/docs/next/contributing)
- [Forumaik Blog](https://adoucoure.com/formulaik)

---
_Source: https://npm.io/package/@formulaik/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._