Research
Security News
Kill Switch Hidden in npm Packages Typosquatting Chalk and Chokidar
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
@meronex/form
Advanced tools
Simple React forms with validation for React MUI.
Install npm i @meronex/form
Import import Form from '@meronex/form';
Add the form
<Form ref={validatedForm} onUpdate={(_formData) => { setFormData(_formData); }} blurDelay={500}> ... React MUI Fields Here </Form
Notice that we've a ref
attached which exposes a validatedForm.reset(
) method and we've an onUpdate
method which is triggered every time there change to the form. The blurDelay default is zero, and it used to delay blur validation to allow time for animation etc.
Add the @material-ui fields with name (required), defaultValue (optional for edit forms) and validator (optional for validation) attributes.
<TextField name={'name'} label="Name" defaultValue={'a'} validate={(v) => { if (!v || v === '') return 'Name is required..!!'; return true; }} />
That's it! The onUpdate will be triggered with all the form data, you can then set it to the state object.
note that the defaultValue and validator are optional. You only need the name attribute for the form to hook for the field. Also, this works with the TextField using select attribute.
Prop | Description |
---|---|
name * | Required field to hook the form to the field |
defaultValue | Optional default value |
validator | Validator function to be triggered onBlur |
blurDelay | Intenger to delay triggering the blur validation in ms |
validateOnInit | Boolean value to validiate on form init |
The Form also exposes the following ref functions:
Function | Description |
---|---|
reset() | Reset the form |
validate() | Force validate the form |
The Form component will bind methods/props to the child fields. The value, onBlur, onChange, error and helperText
props are automatically handled, a form object is created to capture the state of the form and that object is passed to the onUpdate method with every change.
FAQs
A simple react form for React Material UI (and potential other)
We found that @meronex/form 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 found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.