🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

@quid/react-invalid-handler

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@quid/react-invalid-handler

render-prop which provides an easy interface to interact with the HTML form validation API

4.11.6
latest
Source
npm
Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

This render-prop component makes it easy to handle HTML form input validation on your input components.

Usage

import InvalidHandler from '@quid/react-invalid-handler';

<form onSubmit={evt => evt.preventDefault()}>
  <InvalidHandler errorMessage="Custom error message here">
    {(getInputProps, isInvalid) => (
      <input
        type="email"
        required
        {...getInputProps({ onChange: () => console.log('changed') })}
        style={{
          backgroundColor: isInvalid ? 'red' : 'white',
        }}
      />
    )}
  </InvalidHandler>
  <button type="submit">Submit</button>
</form>;

GetInputProps<{ onChange: Event => void, onInvalid: Event => void }>

Call getInputProps to get two custom event handlers needed by the target input element to properly report its validity state.

If you'd like to provide your own onChange and/or onInvalid callbacks, you can call getInputProps with an object containing one or both the functions to merge them with the ones provided by this component.

const { onChange } = getInputProps({ onChange: () => console.log('foobar') });
// calling `onChange` will trigger the `InvalidHandler` logic AND your console.log

isInvalid: boolean

This argument will be true whenever the target input element has an invalid value and the user tried to submit the form.

It wil reset to false after the user changes the value of the input element, and set back to true if the user tries to submit the form again with invalid data.

More documentation is available at https://ui.quid.com

FAQs

Package last updated on 03 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts