Atomic Form

0.1.5 verified Fri May 01 auth: no javascript

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.

Common errors

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

cause Named import used instead of default import.

fix

Replace with: import AtomicForm from 'atomic-form'

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

cause CommonJS require does not automatically unwrap default export.

fix

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

error validate prop expects an array, got object ↓

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

fix

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

error TypeError: Cannot read property 'isValid' of undefined ↓

cause Accessing validation state before it is set.

fix

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

error Warning: String refs are deprecated (React 16.3+) ↓

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

fix

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

Warnings

gotcha refs 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.

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

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

gotcha Default import must be used; named import will result in undefined. ↓

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

gotcha CommonJS require requires .default due to ES module interop. ↓

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

gotcha validate 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={[{ ... }]}

gotcha After 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.

Install

npm install atomic-form

yarn add atomic-form

pnpm add atomic-form

Imports

AtomicForm

wrong

import { AtomicForm } from 'atomic-form'

correct

import AtomicForm from 'atomic-form'

Package exports a default component; named import will fail.

require

wrong

var AtomicForm = require('atomic-form')

correct

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

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

AtomicForm type (TypeScript)
wrong
```
import AtomicForm = require('atomic-form')
```
correct
```
import AtomicForm from 'atomic-form'
```
Package does not ship TypeScript definitions; use @types or define own.

Quickstart

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'));