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
• Installation
• Examples
• Contributing

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

Codesandbox

Contributing

• see CONTRIBUTING.md