Quick start 🚀
For people in a hurry
- React JS
- React Native
- Swift
- Kotlin
- Flutter
- Vue JS
1. Install formulaik and a component library
- npm
- yarn
npm install @formulaik/react @formulaik-community/react-mui
yarn add @formulaik/react @formulaik-community/react-mui
2. Define inputs
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: {
type: 'password',
autoComplete: "current-password",
placeholder: "xxxx-xxxx-xxxx"
},
validations: [
{
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',
},
{
kind: "required",
value: true,
message: "This field can't be blank",
},
]
},
{
component: 'submit',
params: {
text: 'Continue'
}
},
]
3. Provide initial values (optional)
const values = {
email: cookies.get('email'),
}
4. Render forms and handle submit
import Formulaik from '@formulaik/react'
import FormulaikMui from '@formulaik-community/react-mui'
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") }
}
return <>
<h3>Login</h3>
<Formulaik
components={[FormulaikMui]}
values={values}
inputs={inputs}
onSubmit={onSubmit}
/>
</>
}
1. Install formulaik and a component library
- npm
- yarn
npm install @formulaik/react-native @formulaik-community/react-native-elements
yarn add @formulaik/react-native @formulaik-community/react-native-elements
2. Define inputs
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: {
type: 'password',
autoComplete: "current-password",
placeholder: "xxxx-xxxx-xxxx"
},
validations: [
{
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',
},
{
kind: "required",
value: true,
message: "This field can't be blank",
},
]
},
{
component: 'submit',
params: {
text: 'Continue'
}
},
]
3. Provide initial values (optional)
const values = {
email: cookies.get('email'),
}
4. Render forms and handle submit
import Formulaik from '@formulaik/react'
import FormulaikElements from '@formulaik-community/react-native-elements'
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") }
}
return <>
<Text>Login</Text>
<Formulaik
components={[FormulaikElements]}
values={values}
inputs={inputs}
onSubmit={onSubmit}
/>
</>
}