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 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-reactCreate 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}
/>
</>
}This repository follows the semantic branching model.
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.
MIT © yelounak