`react-hooks-useform` implements React hooks to enable an complete, lightweight form implementation for React. It works best with Material-UI components but can be used with native react inputs as well.
npm install react-hooks-useformreact-hooks-useform implements React hooks to enable an complete, lightweight form implementation for React.
It works best with Material-UI components but can be used with native react inputs as well.
npm install --save react-hooks-useform
yarn add react-hooks-useform
const [fieldProps, formProps] = useForm(formConfiguration)
type is _select_event.target.value${label} (optional) if field configured as an optional field. This can be customized in FormOptionsformConfiguration.submit
const SimpleForm = () => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname' },
],
}) return (
)
}
export { SimpleForm }
#### Optional Fields
const SimpleFormOptionalFields = () => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname', optional: true },
],
}) return (
)
}
export { SimpleFormOptionalFields }
#### Customize optional field prompt
const CustomizeOptionalPrompt = () => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname', optional: true },
],
options: {
optionalLabelFormatter: label => ,
},
}) return (
)
}
export { CustomizeOptionalPrompt }
`
#### Field level validation
const FieldValidation = () => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname', optional: true },
{ name: 'phone', label: 'Phone', validate: validatePhone },
],
}) return (
)
}
export { FieldValidation }
#### Field input normalize
const normalizePhone = input => {
let normalizedPhone
...
return normalizedPhone
}const FieldNormalize = () => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname', optional: true },
{ name: 'phone', label: 'Phone', validate: validatePhone, normalize: normalizePhone },
],
})
return (
)
}
export { FieldNormalize }
#### Custom helper text
const HelperText = () => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname', optional: true },
{ name: 'phone', label: 'Phone', helperText: 'Please enter a phone number' },
],
}) return (
)
}
export { HelperText }
#### Custom required field message
const CustomRequiredMessage = () => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name', requiredMessage: 'Name is Required' },
{ name: 'nickname', label: 'Nickname', optional: true },
{ name: 'phone', label: 'Phone', requiredMessage: 'Phone is Required' },
],
}) return (
)
}
export { CustomRequiredMessage }
#### Boolean field
const BooleanToggle = () => {
const SwitchField = ({ label, error, helperText, ...rest }) => {
return (
/>
)}
label={label}
/>
)
} const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname' },
{ name: 'isAdmin', label: 'Administrator', type: 'boolean' },
],
})
return (
)
}
export { BooleanToggle }
#### Number field
const NumberField = () => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname' },
{ name: 'age', label: 'Age', type: 'number', normalize: normalizeNumber },
],
}) return (
)
}
export { NumberField }
#### Select field
const SelectField = () => {
const SelectComponent = ({
label,
error,
value,
helperText,
children,
options,
...rest
}) => { return (
{label && {label} }
{...rest}
error={error}
>
{options.map((option) => {
return
})}
{helperText}
)
}
const genderOptions = [
{ value: 'male', label: 'Male' },
{ value: 'female', label: 'Female' },
]
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname' },
{ name: 'gender', label: 'Gender', type: 'select', options: genderOptions },
],
})
return (
)
}
export { SelectField }
#### Initial values passed into form
const InitialValuesSet = ({ initialValues }) => {
const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname' },
],
initialValues,
}) return (
)
}
export { InitialValuesSet }
#### Dynamic fields
const DynamicFields = () => { const [fields, form] = useForm({
fields: [
{ name: 'fullName', label: 'Full Name' },
{ name: 'nickname', label: 'Nickname' },
],
})
const [dynamicFields, dynamicForm] = useForm({
fields: [
{ name: 'name', label: 'Name' },
{ name: 'label', label: 'Label' },
],
submit: values => {
const name = values.get('name')
const label = values.get('label')
form.addField({ name, label })
},
})
return (
{Object.keys(fields)
.filter(key => (key !== 'fullName' && key !== 'nickname'))
.map(key => (
))
}
)
}
export { DynamicFields }