GithubHelp home page GithubHelp logo

react-form-values's Introduction

react-form-values

Custom React hook that simplifies how you can control the state of form fields using a clean and reasonable syntax. Read more at this Medium article.

Install

npm i react-form-values

Prerequisite: npm i react@^16.8.0 react-dom@^16.8.0

API

useFormValues() accepts two parameters:

  1. initialValues object - the initial field name/value pairs that serve as the baseline for the form
  2. onFormChange function(object) - callback executed with object of name/value pairs whenever any field changes

useFormValues() returns an array with three elements:

  1. formValues object - form field name keys mapped to their current values
  2. formSetters object - form field name keys mapped to setter function (also appropriate for assignment via onChange)
  3. utilities object with the following properties:
  • clear function - call this to clear all form fields with a blank value ('')
  • isDirty boolean - true if any formValues differ at all from initialValues
  • reset function - call this to reset the form to the initialValues

Note: the properties in formSetters can be called by your code arbitrarily with an arbitrary value (it is not required that it only be passed to onChange or an Event object). For example:

formSetters.phoneNumber('949.555.1212') // this will change the value of formValues.phoneNumber

Usage

Basic example

import useFormValues from 'react-form-values'

const MyUserForm = props => {
  const [formValues, formSetters] = useFormValues()

  const onSubmit = event => {
    event.preventDefault()

    console.log('Want to submit form values:', formValues)
  }

  return (
    <form onSubmit={onSubmit}>
      <input
        onChange={formSetters.name}
        value={formValues.name}
      />

      <input
        onChange={formSetters.email}
        value={formValues.email}
      />

      <button type="submit">
        Submit
      </button>
    </form>
  )
}

Pre-populating form, dirty checking, clear, and reset

import useFormValues from 'react-form-values'

const userPreviouslyLoadedViaApi = {
  id: 12345,
  name: 'James Mercer',
  email: '[email protected]',
}

const MyUserForm = props => {
  // third returned element is utilities object
  const [formValues, formSetters, utils] = useFormValues(userPreviouslyLoadedViaApi)

  const onMakeBlank = () => {
    utils.clear()
  }

  const onReset = () => {
    if (utils.isDirty) {
      if (!window.confirm('Your changes to the user will be lost - continue with reset?')) {
        return
      }

      utils.reset()
    }
  }

  return (
    <div>
      <input
        onChange={formSetters.name}
        value={formValues.name}
      />

      <br />

      <input
        onChange={formSetters.email}
        value={formValues.email}
      />

      <br />

      <button
        onClick={onMakeBlank}
        type="button"
      >
        Clear
      </button>

      &nbsp;

      <button
        onClick={onReset}
        type="button"
      >
        Reset
      </button>
    </div>
  )
}

react-form-values's People

Contributors

rommelsantor avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.