@reacthooks.org/use-form-validation

✴ Project Homepage ✴

✴ Docs ✴

✴ Demo ✴
✴ Usage ✴
✴ Examples ✴

Install

$ npm install @reacthooks.org/use-form-validation

useFormValidation

React Hook to help with forms.

Usage

import useFormValidation from 'use-form-validation';

const initialFormState = {
  email: '',
}
function validate(values) {
  console.log('validate()')
  // check email address
  return { email: 'Invalid email address' }
}

function FormValidation() {
  const { values, errors, onChange, onBlur, onSubmit } = useFormValidation(initialFormState, validate, values => {
    // called when there has been a change and everything validaates
    console.log('values:', values)
  })

  return (
    <form onSubmit={ onSubmit }>
      <label>
        <span>Email</span>
        <input name="email" value={ values.email } onBlur={ onBlur } onChange={ onChange } />
      </label>
      <br />
      {
        errors.email && <p style={ { color: 'red' } }>{ errors.email }</p>
      }
      <input type="submit" />
    </form>
  );
}

Other Hooks

Please see all of the other reacthooks.org hooks:

• use-document-title - Change the document.title
• use-resize - Subscribe to Window 'resize' events and get the width and height
• use-window-width - Subscribe to Window 'resize' events and get the width
• use-online - Get online/offline status
• use-match-media - Get whether a media query is matched
  • .usePrefersColorScheme() - Get whether the user prefers the 'light' or 'dark' color scheme
• use-set-timeout - use and automatically clear a setTimeout()
• use-set-interval - use and automatically clear a setInterval()
• use-orientation-change - get Device Orientation updates
• use-session-storage - gets and sets a key in window.sessionStorage
• use-local-storage - gets and sets a key in window.localStorage
• use-form-validation - helps manage form values, validation, and errors
• use-watch-position - get the user's location using the Geolocation API

Author

$ npx chilts

   ╒════════════════════════════════════════════════════╕
   │                                                    │
   │   Andrew Chilton (Personal)                        │
   │   -------------------------                        │
   │                                                    │
   │          Email : [e-mail]             │
   │            Web : https://chilts.org                │
   │        Twitter : https://twitter.com/andychilton   │
   │         GitHub : https://github.com/chilts         │
   │         GitLab : https://gitlab.org/chilts         │
   │                                                    │
   │   Apps Attic Ltd (My Company)                      │
   │   ---------------------------                      │
   │                                                    │
   │          Email : [e-mail]              │
   │            Web : https://appsattic.com             │
   │        Twitter : https://twitter.com/AppsAttic     │
   │         GitLab : https://gitlab.com/appsattic      │
   │                                                    │
   │   Node.js / npm                                    │
   │   -------------                                    │
   │                                                    │
   │        Profile : https://www.npmjs.com/~chilts     │
   │           Card : $ npx chilts                      │
   │                                                    │
   ╘════════════════════════════════════════════════════╛

(Ends)