Formulaik-Mui
Visit The Formulaik project to get started with Formulaik.
This a Formulaik components library built on top of Material UI. Formulaik components are a set of inputs compatible with a Formulaik engine. In this case, the Formulaik-Mui library is made for the Formulaik 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 the Formulaik React Mui components library
npm install @formulaik-community/formulaik-mui-reactUsage
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}
/>
</>
}Components
| Component Key | Description | Parameters |
|---|---|---|
input |
Text input | #TODO |
select |
Choice component | #TODO |
submit |
Formulaik submit button | #TODO |
dateTimePicker |
Date time picker | #TODO |
checkbox |
Checkbox | #TODO |
textArea |
Autogrowing text area | #TODO |
dateRangePicker |
Date range picker | #TODO |
autocomplete |
Autocomplete input field | #TODO |
radioGroup |
Radio group | #TODO |
autocomplete |
Autocomplete input field | #TODO |
button |
Button | #TODO |
buttonGroup |
Button group | #TODO |
rating |
Rating | #TODO |
switch |
Switch | #TODO |
fileUpload |
File uploader | #TODO |
Versionning
This repository follows the semantic branching model.
Contributing
<ahref="https://github.com/adoucoure">Aboubacar Doucouré</ahref=>
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.
License
MIT yelounak