{"id":24937,"library":"atomic-form","title":"Atomic Form","description":"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.","status":"active","version":"0.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/atomicjolt/atomic-form","tags":["javascript","react","react-component","forms","form","validation","data-binding","data-collection"],"install":[{"cmd":"npm install atomic-form","lang":"bash","label":"npm"},{"cmd":"yarn add atomic-form","lang":"bash","label":"yarn"},{"cmd":"pnpm add atomic-form","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides built-in validation methods like isEmail and isLength","package":"validator","optional":true}],"imports":[{"note":"Package exports a default component; named import will fail.","wrong":"import { AtomicForm } from 'atomic-form'","symbol":"AtomicForm","correct":"import AtomicForm from 'atomic-form'"},{"note":"CommonJS users must use .default due to ES module interop.","wrong":"var AtomicForm = require('atomic-form')","symbol":"require","correct":"var AtomicForm = require('atomic-form').default"},{"note":"Package does not ship TypeScript definitions; use @types or define own.","wrong":"import AtomicForm = require('atomic-form')","symbol":"AtomicForm type (TypeScript)","correct":"import AtomicForm from 'atomic-form'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport AtomicForm from 'atomic-form';\n\nclass MyForm extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { initialData: { email: '' } };\n  }\n\n  afterValidation(formValidations) {\n    this.setState({ validations: formValidations });\n  }\n\n  doSubmit(formData) {\n    console.log('Form data:', formData);\n  }\n\n  render() {\n    return (\n      <AtomicForm\n        initialData={this.state.initialData}\n        doSubmit={this.doSubmit}\n        afterValidation={this.afterValidation}\n      >\n        <div>\n          <input type=\"text\" ref=\"email\" validate={[{ message: 'Invalid email', validate: 'isEmail' }]} />\n        </div>\n      </AtomicForm>\n    );\n  }\n}\n\nReactDOM.render(<MyForm />, document.getElementById('root'));","lang":"javascript","description":"Minimal example of a React form using AtomicForm with email validation and submit handler."},"warnings":[{"fix":"Replace string refs with callback refs or React.createRef in your components.","message":"refs are string refs (deprecated in React 16) - use callback refs or React.createRef for compatibility with newer React versions.","severity":"gotcha","affected_versions":">=0.1.5"},{"fix":"Convert React.createClass to an ES6 class extending React.Component.","message":"React.createClass is deprecated since React 15.5 - use ES6 class or functional components.","severity":"deprecated","affected_versions":">=0.1.5"},{"fix":"Use import AtomicForm from 'atomic-form' (default import).","message":"Default import must be used; named import will result in undefined.","severity":"gotcha","affected_versions":">=0.1.5"},{"fix":"Use var AtomicForm = require('atomic-form').default;","message":"CommonJS require requires .default due to ES module interop.","severity":"gotcha","affected_versions":">=0.1.5"},{"fix":"Always wrap validation objects in an array: validate={[{ ... }]}","message":"validate prop expects an array of objects; passing a single object may cause validation to silently fail.","severity":"gotcha","affected_versions":">=0.1.5"},{"fix":"Use ref to access formData method when needed.","message":"After submit, formData is passed to doSubmit; manually calling this.refs.MainForm.formData() is needed for real-time access.","severity":"gotcha","affected_versions":">=0.1.5"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Replace with: import AtomicForm from 'atomic-form'","cause":"Named import used instead of default import.","error":"import { AtomicForm } from 'atomic-form' -> undefined"},{"fix":"Use: var AtomicForm = require('atomic-form').default;","cause":"CommonJS require does not automatically unwrap default export.","error":"require('atomic-form') returns { default: ... }"},{"fix":"Wrap in array: validate={[{ message: '...', validate: '...' }]}","cause":"validate prop passed as a single object instead of array of objects.","error":"validate prop expects an array, got object"},{"fix":"Check if this.state.validations exists before accessing specific field.","cause":"Accessing validation state before it is set.","error":"TypeError: Cannot read property 'isValid' of undefined"},{"fix":"Use callback refs or React.createRef: ref={this.emailRef}","cause":"Using string refs (like ref='email') which are deprecated.","error":"Warning: String refs are deprecated (React 16.3+)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}