atomic-form

library0.1.5jsnpmunverified

A React component for building forms with built-in data collection and validation. Version 0.1.5 is the latest stable release, with no recent updates indicating active development. Integrates with the Validator library for common validations and supports custom validation functions, initial data population, multiple validation rules per input, and multiple validation error messages. Differentiates by offering a declarative component approach with props for submit and validation callbacks, catering to React class components with refs for form state access.

web-framework

npm install atomic-form

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ATOMIC-FORM

atomic-form

web-frameworkjavascriptv0.1.5

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AtomicForm

✓ import AtomicForm from 'atomic-form'

✗ import { AtomicForm } from 'atomic-form'

Package exports a default component; named import will fail.

require

✓ var AtomicForm = require('atomic-form').default

✗ var AtomicForm = require('atomic-form')

CommonJS users must use .default due to ES module interop.

AtomicForm type (TypeScript)

✓ import AtomicForm from 'atomic-form'

✗ import AtomicForm = require('atomic-form')

Package does not ship TypeScript definitions; use @types or define own.

Minimal example of a React form using AtomicForm with email validation and submit handler.

import React from 'react'; import ReactDOM from 'react-dom'; import AtomicForm from 'atomic-form'; class MyForm extends React.Component { constructor(props) { super(props); this.state = { initialData: { email: '' } }; } afterValidation(formValidations) { this.setState({ validations: formValidations }); } doSubmit(formData) { console.log('Form data:', formData); } render() { return ( <AtomicForm initialData={this.state.initialData} doSubmit={this.doSubmit} afterValidation={this.afterValidation} > <div> <input type="text" ref="email" validate={[{ message: 'Invalid email', validate: 'isEmail' }]} /> </div> </AtomicForm> ); } } ReactDOM.render(<MyForm />, document.getElementById('root'));

Debug

Known issues

gotcharefs are string refs (deprecated in React 16) - use callback refs or React.createRef for compatibility with newer React versions.

fix

Replace string refs with callback refs or React.createRef in your components.

affects: >=0.1.5

deprecatedReact.createClass is deprecated since React 15.5 - use ES6 class or functional components.

fix

Convert React.createClass to an ES6 class extending React.Component.

affects: >=0.1.5

gotchaDefault import must be used; named import will result in undefined.

fix

Use import AtomicForm from 'atomic-form' (default import).

affects: >=0.1.5

gotchaCommonJS require requires .default due to ES module interop.

fix

Use var AtomicForm = require('atomic-form').default;

affects: >=0.1.5

gotchavalidate prop expects an array of objects; passing a single object may cause validation to silently fail.

fix

Always wrap validation objects in an array: validate={[{ ... }]}

affects: >=0.1.5

gotchaAfter submit, formData is passed to doSubmit; manually calling this.refs.MainForm.formData() is needed for real-time access.

fix

Use ref to access formData method when needed.

affects: >=0.1.5

Errors

Common errors & fixes

import { AtomicForm } from 'atomic-form' -> undefined

Named import used instead of default import.

fix

Replace with: import AtomicForm from 'atomic-form'

require('atomic-form') returns { default: ... }

CommonJS require does not automatically unwrap default export.

fix

Use: var AtomicForm = require('atomic-form').default;

validate prop expects an array, got object

validate prop passed as a single object instead of array of objects.

fix

Wrap in array: validate={[{ message: '...', validate: '...' }]}

TypeError: Cannot read property 'isValid' of undefined

Accessing validation state before it is set.

fix

Check if this.state.validations exists before accessing specific field.

Warning: String refs are deprecated (React 16.3+)

Using string refs (like ref='email') which are deprecated.

fix

Use callback refs or React.createRef: ref={this.emailRef}

Upgrade

Version history

0.1.5latest on npm

Audit

Dependencies

validatoroptionalProvides built-in validation methods like isEmail and isLength

Agent activity

15 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/atomicjolt/atomic-form ↗

packagehttps://www.npmjs.com/package/atomic-form ↗

homepagehttps://atomicjolt.github.io/atomic-form/ ↗