https://github.com/psaia/react-serial-forms
A lightweight and extendable SSR-friendly form library (for React).
https://github.com/psaia/react-serial-forms
async forms react react-hooks typescript
Last synced: 5 months ago
JSON representation
A lightweight and extendable SSR-friendly form library (for React).
- Host: GitHub
- URL: https://github.com/psaia/react-serial-forms
- Owner: psaia
- Created: 2015-05-23T16:31:59.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2021-05-10T17:26:27.000Z (about 5 years ago)
- Last Synced: 2025-11-01T13:06:31.893Z (8 months ago)
- Topics: async, forms, react, react-hooks, typescript
- Language: TypeScript
- Homepage:
- Size: 2.68 MB
- Stars: 168
- Watchers: 6
- Forks: 18
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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.
```typescript
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
Form is saving.
}
return (
);
}
```
### Using a custom component
```typescript
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 {
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 (
{props.label ? {props.label} : null}
{props.helper ? (
) : null}
);
}
```
Now you can use this component simply by importing it:
```typescript
...
...
```