Visit The Formulaik project to get started with Formulaik.
Formulaik official react-native 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-native- Install a React Formulaik component library The React-native Paper library for instance:
npm install @formulaik-community/react-native-paperCreate your inputs and create the form using formulaik:
const inputs = [
{
component: 'input',
id: 'email',
label: 'Email',
type: "string",
params: {
type: 'email',
placeholder: "email@domain.com"
},
validation: {
format: {
value: "email",
message: 'Invalid email format',
},
required: {
value: true,
message: "This field can't be blank",
},
}
},
{
component: 'inputPassword',
label: 'Password',
id: 'password',
type: "string",
params: {
type: 'password',
autoComplete: "current-password",
placeholder: "xxxx-xxxx-xxxx"
},
validation: {
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',
},
required: {
value: true,
message: "This field can't be blank",
},
}
},
{
component: 'submit',
params: {
text: 'Continue'
}
},
]
import Formulaik from '@formulaik/react'
import FormulaikPaper from '@formulaik-community/react-native-paper'
import { Text } from 'react-native'
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 <>
<Text>Login</Text>
<Formulaik
components={[FormulaikPaper]}
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