Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamiebuilds/react-jeff
A Good Form Library
https://github.com/jamiebuilds/react-jeff
Last synced: about 2 months ago
JSON representation
A Good Form Library
- Host: GitHub
- URL: https://github.com/jamiebuilds/react-jeff
- Owner: jamiebuilds
- License: mit
- Created: 2019-03-13T22:28:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-30T14:06:25.000Z (about 4 years ago)
- Last Synced: 2024-05-02T12:41:00.582Z (5 months ago)
- Language: TypeScript
- Homepage: https://react-jeff.netlify.com/
- Size: 799 KB
- Stars: 211
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Jeff
> A Good Form Library
- ~800 bytes minified+gzip
- Easy to learn API
- Write your form code in a way that is reusable and testable
- Seamless sync and async form validations (including on form submit)
- Tons of utilty features out of the box
- Written with React Hooks
- Typed with TypeScript
## Install
```
npm install react-jeff
```
## Usage
```js
import React from "react"
import { useField, useForm } from "react-jeff"
/**
* 1. Write some validations that accept an input value and return an array of errors.
* (If the array is empty, the value is considered valid)
*/
function validateUsername(value) {
let errs = []
if (value.length < 3) errs.push("Must be at least 3 characters long")
if (!/^[a-z0-9_-]*$/i.test(value)) errs.push("Must only contain alphanumeric characters or dashes/underscores")
if (!/^[a-z0-9]/i.test(value)) errs.push("Must start with alphanumeric character")
if (!/[a-z0-9]$/i.test(value)) errs.push("Must end with alphanumeric character")
return errs
}
function validatePassword(value) {
let errs = []
if (value.length < 6) errs.push("Must be at least 6 characters long")
if (!/[a-z]/.test(value)) errs.push("Must contain at least one lowercase letter")
if (!/[A-Z]/.test(value)) errs.push("Must contain at least one uppercase letter")
if (!/[0-9]/.test(value)) errs.push("Must contain at least one number")
return errs
}
/**
* 2. Write some custom components that you'll reuse for all of your forms.
*/
function Form({ onSubmit, ...props }) {
return (
{
event.preventDefault() // Make sure you call `event.preventDefault()` on your forms!
onSubmit()
}}/>
)
}
function Input({ onChange, ...props }) {
return (
{
onChange(event.currentTarget.value) // Make sure all of your inputs call `props.onChange` with the new value.
}} />
)
}
/**
* 3. Create your form!
*/
function SignupForm() {
// Create some fields...
let username = useField({
defaultValue: "",
required: true,
validations: [validateUsername],
})
let password = useField({
defaultValue: "",
required: true,
validations: [validatePassword],
})
// Create your onSubmit handler...
function onSubmit() {
// Do something with the form...
}
// Create your form...
let form = useForm({
fields: [username, password],
onSubmit: onSubmit,
})
// Write your UI!
return (
Sign Up
)
}
```
## API
### `useField()`
Call `useField()` to create a single field in a form.
```js
let field = useField({
defaultValue: (value), // ....... (Required) The default value of the field.
validations: [(...errors)], // .. (Optional) Validations to run when the field is `validate()`'d.
required: boolean, // ........... (Optional) Should the field be required?
disabled: boolean, // ........... (Optional) Should the field be disabled?
readOnly: boolean, // ........... (Optional) Should the field be readOnly?
})
```
```js
field == {
value: (value), // ......... The current value of the field.
defaultValue: (value), // .. The `defaultValue` passed into `useField({ defaultValue })`.
dirty: boolean, // ......... Has the field been changed from its defaultValue?
touched: boolean, // ....... Has the element this field is attached to been focused previously?
focused: boolean, // ....... Is the element this field is attached to currently focused?
blurred: boolean, // ....... Has the element this field is attached to been focused and then blurred?
validating: boolean, // .... Is the field validating itself?
valid: boolean, // ......... Is the field currently valid? (must have no errors, and if the field is required, must not be empty)
errors: [(...errors)], // .. The collected errors returned by `opts.validations`
required: boolean, // ...... Is the field required?
disabled: boolean, // ...... Is the field disabled?
readOnly: boolean, // ...... Is the field readOnly?
setValue: Function, // ..... Call with a value to manually update the value of the field.
setRequired: Function, // .. Call with true/false to manually set the `required` state of the field.
setDisabled: Function, // .. Call with true/false to manually set the `disabled` state of the field.
setReadOnly: Function, // .. Call with true/false to manually set the `readOnly` state of the field.
reset: Function, // ........ Reset the field to its default state.
validate: Function, // ..... Manually tell the field to validate itself (updating other fields).
// Props to pass into an component to attach the `field` to it:
props: {
value: (value), // ....... The current value (matches `field.value`).
onChange: Function, // ... An `onChange` handler to update the value of the field.
onFocus: Function, // .... An `onFocus` handler to update the focused/touched/blurred states of the field.
onBlur: Function, // ..... An `onFocus` handler to update the focused/blurred states of the field.
required: boolean, // .... Should the element be `required`?
disabled: boolean, // .... Should the element be `disabled`?
readOnly: boolean, // .... Should the element be `readOnly`?
},
}
```
### `useForm()`
Call `useForm()` with to create a single form.
```js
let form = useForm({
fields: [(...fields)], // .. All of the fields created via `useField()` that are part of the form.
onSubmit: Function, // ..... A submit handler for the form that receives the form submit event.
})
```
```js
form == {
fieldErrors: [(...errors)], // ... The collected errors from all of the fields in the form.
submitErrors: [(...errors)], // .. The errors returned by `opts.onSubmit`.
submitted: boolean, // ........... Has the form been submitted at any point?
submitting: boolean, // .......... Is the form currently submitting?
focused: boolean, // ............. Are *any* of the fields in the form currently `focused`?
touched: boolean, // ............. Are *any* of the fields in the form currently `touched`?
dirty: boolean, // ............... Are *any* of the fields in the form currently `dirty`?
valid: boolean, // ............... Are *all* of the fields in the form currently `valid`?
validating: boolean, // .......... Are *any* of the fields in the form currently `validating`?
reset: Function, // .............. Reset all of the fields in the form.
validate: Function, // ........... Validate all of the fields in the form.
submit: Function, // ............. Submit the form manually.
// Props to pass into a form component to attach the `form` to it:
props: {
onSubmit: Function, // ......... An onSubmit handler to pass to an element that submits the form.
},
}
```