0.4.1 • Published 4 years ago
savignano-form v0.4.1
Manage form state in React.
Savignano-Form is a JavaScript library for managing form state.
- Simple: Components and hooks for all form elements.
- Powerful: Robust props supplied to field events and callbacks.
- Performant: Lightweight with a small bundle size.
Table of Contents
Motivation
- Persist only whats rendered: When a field is unmounted its value, error, and touched state are removed as well. No additional work is required to keep forms state and rendered state insync.
- Reduce bundle size: Considerably less weight compared to alternatives.
- Handle complex field interactions with ease: Easily manage complex field interactions with callbacks. Provide a callback for a change and/or blur events and recieve the forms state and methods for use in interacting with other fields. Form state and methods are also made available to validate, parse, and format functions.
Installation
npm install savignano-form
Usage with components
import React from 'react';
import ReactDOM from 'react-dom';
import {
Form,
FormField,
FormSubmit,
FormReset
} from 'savignano-form';
function App() {
return (
<Form onSubmit={(values) => makeApiRequest(values)}>
<FormField component="input" label="Email" name="email" />
<FormReset component="button">
Reset
</FormReset>
<FormSubmit component="button">
Submit
</FormSubmit>
</Form>
);
}
Or, roll your own components with hooks
import React from 'react';
import ReactDOM from 'react-dom';
import {
Form,
useFormField,
useFormReset,
useFormSubmit
} from 'savignano-form';
function Field({
id,
label,
name,
onBlur: onBlurCallback,
onChange: onChangeCallback,
onFormat,
onParse,
onValidate,
}) {
const {
checked,
error,
isTouched,
onBlur,
onChange,
value,
} = useFormField({
name,
onBlur: onBlurCallback,
onChange: onChangeCallback,
onFormat,
onParse,
onValidate,
type: 'text',
})
return (
<div>
<label htmlFor={id}>
{label}
<input
checked={checked}
id={id}
name={name}
onBlur={onBlur}
onChange={onChange}
type={type}
value={value}
/>
</label>
{isTouched && error ? <span>{error}</span> : null}
</div>
)
}
function Reset({ names, ...rest }) {
const { onReset, isDisabled } = useFormReset(names)
return (
<button
{...rest}
onClick={() => onReset(names)}
disabled={isDisabled}
type="button"
/>
)
}
function Submit = ({
children,
disabled,
onClick,
onPress,
...rest
}) => {
const {
isDisabled,
isSubmitError,
isSubmitSuccess,
isSubmitting,
onSubmit,
} = useFormSubmit()
const renderChildren = () => {
if (isSubmitting) return 'Submitting...'
if (isSubmitSuccess) return 'Submit Success'
if (isSubmitError) return 'Submit Error'
return children
}
return (
<button
{...rest}
{...onClick && { onClick: () => onSubmit(onClick) }}
{...onPress && { onPress: () => onSubmit(onPress) }}
disabled={disabled || isDisabled}
>
{renderChildren()}
</button>
)
}
function App() {
return (
<Form onSubmit={(values) => makeApiRequest(values)}>
<Field label="Email" name="email" />
<Reset>Reset</Reset>
<Submit>Submit</Submit>
</Form>
);
}
Examples
Contributing
- see CONTRIBUTING.md
0.4.1
4 years ago
0.4.0
4 years ago
0.3.9
4 years ago
0.3.6
4 years ago
0.3.5
4 years ago
0.3.8
4 years ago
0.3.7
4 years ago
0.3.4
4 years ago
0.3.3
4 years ago
0.3.2
4 years ago
0.3.1
4 years ago
0.3.0
4 years ago
0.2.9
4 years ago
0.2.8
4 years ago
0.2.7
4 years ago
0.2.6
4 years ago
0.2.5
4 years ago
0.2.4
4 years ago
0.2.3
4 years ago
0.2.2
4 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago