0.0.16-alpha • Published 5 years ago
formance v0.0.16-alpha
Formance
Enjoy forms in React :smirk:
Installation
npm install --save formance
or
yarn add formance
Getting Started
Formance helps to simplify managing forms in React. It's main goals are productivity and extensibility. To accomplish these goals it sets some convenient defaults and handles some repetitive jobs automatically and, also, provides clean api for constructing custom solutions.
Basic Example
Let's take a quick look:
import { Form, Field, FieldError } from 'formance'
import { isEmail } from './some-validators'
const isRequired = value =>
(value ? undefined : 'Required')
const submitHandler = values => {
console.log('values:', values)
}
const MyComponent = () => (
<Form submitHandler={submitHandler}>
{({ valid, onSubmit, submitting, submitted }) => (
<form onSubmit={onSubmit}>
<Field
name="name"
placeholder="Name"
validate={isRequired}
displayError
/>
<FieldError name="name" />
<Field
name="email"
placeholder="Email"
validate={[isRequired, isEmail]} // validators will run in giving order, first error will be returned
displayError // shortcut for <FieldError name="email" />
/>
<button disabled={(submitted && !valid) || submitting}>
{submitting ? 'Saving...' : 'Save'}
</button>
</form>
)}
</Form>
)
export default MyComponent
More docs and examples coming soon...
0.0.16-alpha
5 years ago
0.0.15-alpha
5 years ago
0.0.14-alpha
5 years ago
0.0.13-alpha
5 years ago
0.0.12-alpha
5 years ago
0.0.11-alpha
5 years ago
0.0.10-alpha
5 years ago
0.0.9-alpha
5 years ago
0.0.8-alpha
5 years ago
0.0.7-alpha
5 years ago
0.0.6-alpha
5 years ago
0.0.5-alpha
5 years ago
0.0.4-alpha
5 years ago
0.0.3-alpha
5 years ago
0.0.2-alpha
5 years ago
0.0.1-alpha
5 years ago