
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
@quid/react-invalid-handler
Advanced tools
render-prop which provides an easy interface to interact with the HTML form validation API
This render-prop component makes it easy to handle HTML form input validation on your input components.
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
render-prop which provides an easy interface to interact with the HTML form validation API
The npm package @quid/react-invalid-handler receives a total of 0 weekly downloads. As such, @quid/react-invalid-handler popularity was classified as not popular.
We found that @quid/react-invalid-handler demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.