react-flexible-form
v0.0.12
Published
React Flexible Form
Downloads
373
Maintainers
Readme
Work In Progress !!!
React Flexible Form
React Flexible Form is a form library to create a from in React.
Features:
- State of the form can be internal (held by RFF) or external (held, for example, in Redux)
- Do not depend on context (althrough it can be used)
- Typesafe as much as possible (it is developed in TypeScript)
- Customizable. Internal begavior of the form can be changed
- Ability to create Subforms
- Built-in loader component
- Partial state updates. Only object that contains updated field is changed.
- Setter functions accept values or callbacks.
setFieldValue: (name: Name, value: (Values | (prev: Value) => Value))
Install
npm i react-flexible-form react-flexible-form-resolvers
Usage
Example below requires Yup installation
import { useCallback } from 'react';
import { Field, getInErrors, OnSubmit, useForm } from 'react-flexible-form'
import { yupResolver } from 'react-flexible-form-resolvers'
import * as Yup from 'yup'
type Values = {
firstName: string,
lastName: string,
}
const resolver = yupResolver(Yup.object({
firstName: Yup.string().required('Required'),
lastName: Yup.string().required('Required')
}))
export default function SomeForm () {
const onSubmit = useCallback<OnSubmit<Values>>(
({ formControl: { values } }) => {
alert(`Form values: \n ${JSON.stringify(values)}`);
},
[],
);
const formControl = useForm({
initialValues: {
firstName: '',
lastName: '',
},
onSubmit,
resolver,
})
return (
<div
style={{
gap: "7px",
display: "flex",
flexDirection: "column",
width: '100%',
alignItems: 'center',
}}
>
<label>First Name</label>
<Field
rffFormControl={formControl}
rffName="firstName"
rffComponent="input"
/>
<div style={{ color: "red", whiteSpace: 'pre' }}>{getInErrors({ errors: formControl.errors, name: 'firstName' }).join(', ') || ' '}</div>
<label>Last Name</label>
<Field
rffFormControl={formControl}
rffName="lastName"
rffComponent="input"
/>
<div style={{ color: "red", whiteSpace: 'pre' }}>{getInErrors({ errors: formControl.errors, name: 'lastName' }).join(', ') || ' '}</div>
<button onClick={formControl.handleSubmit}>
Submit
</button>
</div>
)
}