react-serial-forms
v3.0.3
Published
A lean, highly performant, and extendable form library for React.
Downloads
13
Readme
React Serial Forms v3
Note: Version 3 has been rebuilt from the ground up and is incompatible with prior major versions.
Serial Forms is optimized to be mostly unopinionated, fast, and extendible. This module is useful for complex or large applications with a variety of form input components.
- First-class citizen TypeScript module
- React hooks interface
- Simple async-capable validation protocol
- Simple input masking protocol
- SSR Friendly
- Light weight
- Great form utility belt for the major frameworks - Relay, Apollo, Redux, etc.
▲ ▲
│ │
│ │
Values Validation Results
│ │
│ │
│ │
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┃
┃ ┃
┃ Form Instance ┃
┃ ┃
┃ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
▲ │ │
│ │ │
│ │ │
Input Mutations Validation Input State
│ │ │
│ │ │
│ ▼ ▼
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
│
└ │ Input Instance │
└ ─
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
Installation
npm i --save react-serial-forms
Usage
Better documentation is coming soon. See the example below for API implementation.
import React from "react";
import FormErrors from "react-serial-forms/lib/components/FormErrors";
import Input from "react-serial-forms/lib/components/inputs/Input";
import useForm from "react-serial-forms/lib/hooks/use-form";
import { validations } from "react-serial-forms/lib/validation";
import phoneMask from "react-serial-forms/lib/masks/phone";
function MyComponent() {
const [form, saving, onSubmit] = useForm(
// Set the initial values for the inputs used in the form.
{
name: "",
cellPhone: ""
},
// Handle the form submission. values => { cellPhone: ..., name: ... }
async values => {
const remoteErrors = await makeRemoteRequestWithValues(values);
// Do stuff with errors from the server perhaps.
}
);
if (saving) {
return <p>Form is saving.</p>
}
return (
<form onSubmit={onSubmit}>
<Input
type="text"
name="name"
label="Your Name"
form={form}
placeholder="John Doe"
validations={[validations.required("Your name is required.")]}
/>
<Input
type="text"
name="cellPhone"
label="Your Phone Number"
mask={phoneMask}
form={form}
placeholder="555-555-5555"
validations={[validations.phone("A valid phone number is required.")]}
/>
</form>
);
}
Using a custom component
import React from "react";
import Textarea from "../custom-inputs/Textarea"; // Assume you have your own.
import { BaseInputProps } from "react-serial-forms/lib/types";
import Form from "react-serial-forms/lib/form";
import Errors from "react-serial-forms/lib/components/FormErrors";
import useInput from "react-serial-forms/lib/hooks/use-input";
export interface Props extends BaseInputProps<Form> {
bold: boolean;
italic: boolean;
underline: boolean;
ol: boolean;
ul: boolean;
}
export default function Wysiwyg(props: Props) {
const [id, dirty, currentValue, errors, onChange] = useInput({
name: props.name,
getValueFromEvent: val => val,
defaultValue: "",
form: props.form,
validations: props.validations
});
return (
<div className="input-wrapper">
{props.label ? <label htmlFor={id}>{props.label}</label> : null}
<Textarea
onChange={onChange}
value={currentValue}
bold={props.bold}
italic={props.italic}
underline={props.underline}
ol={props.ol}
ul={props.ul}
/>
{props.helper ? (
<small
className="helper-text"
dangerouslySetInnerHTML={{ __html: props.helper }}
/>
) : null}
<Errors errors={dirty ? errors : []} />
</div>
);
}
Now you can use this component simply by importing it:
...
<Wysiwyg
type="text"
name="description"
bold={true}
italic={false}
ol={true}
underline={false}
ul={false}
form={form}
validations={[validations.required("A description is required.")]}
/>
...