React DOM Factories

1.0.2 · abandoned · verified Sun Apr 19

react-dom-factories is a legacy add-on package, currently at version 1.0.2, that provides pre-configured DOM factory methods for creating React elements. These factories, such as `DOM.div` or `DOM.p`, were originally part of React itself prior to version 16.0.0. The package was created to serve applications that depended on these specific factory functions, allowing them to continue functioning after React itself removed them. However, its use is strongly discouraged in modern React development. Developers are advised to use JSX for declarative UI creation or `React.createElement` (which `createFactory` wraps) instead. The package is considered abandoned, has seen no updates since its initial release, and is not designed for current React versions or development practices, nor does it receive any ongoing maintenance or new releases.

Common errors

```
TypeError: DOM.div is not a function
```
cause The `DOM` object from `react-dom-factories` was either not correctly imported (e.g., trying to destructure a default export) or the module itself failed to load or initialize.

fix Ensure you are using `import DOM from 'react-dom-factories';` for ESM or `const DOM = require('react-dom-factories');` for CJS. Verify your module resolver configuration, especially in older build setups.
```
TS2307: Cannot find module 'react-dom-factories' or its corresponding type declarations.
```
cause Attempting to import `react-dom-factories` in a TypeScript project without available type definitions.

fix The recommended solution is to transition to JSX. As a temporary measure, you can create a declaration file (`your-project.d.ts`) and add `declare module 'react-dom-factories';` to allow TypeScript to acknowledge the module, though this provides no type safety.

Warnings

deprecated The `react-dom-factories` package is explicitly marked as a legacy add-on by the React team and is considered deprecated. It is not recommended for new projects and should be phased out of existing ones.
Fix: Modern React development exclusively uses JSX for declarative UI. Replace `DOM.div(...)` with `<div>...</div>` or `React.createElement('div', ...)`.
gotcha This package is effectively abandoned, with its last release (1.0.2) being very old. It may exhibit compatibility issues with recent versions of React (post-React 15/16) and modern JavaScript tooling, leading to unexpected errors or behavior.
Fix: Avoid using this package. If maintenance requires its use, pin your React version to an older compatible release and ensure your build tools can correctly process legacy CommonJS modules.
gotcha There are no official or widely maintained TypeScript type definitions for `react-dom-factories`. Using it in a TypeScript project will likely result in 'Cannot find module' or 'Property does not exist' errors, diminishing type safety.
Fix: Migrate to JSX, which offers comprehensive TypeScript support. If a temporary workaround is needed, you might declare a custom module type (`declare module 'react-dom-factories';`) or resort to `@ts-ignore`, but these are not long-term solutions.

Install

npm install react-dom-factories npm
yarn add react-dom-factories yarn
pnpm add react-dom-factories pnpm

Imports

DOM
wrong:
```
import { DOM } from 'react-dom-factories';
```
correct:
```
import DOM from 'react-dom-factories';
```
This package exports a single default object named 'DOM' which contains all the factory methods (e.g., `DOM.div`, `DOM.p`). It is not a named export.
DOM
wrong:
```
const { DOM } = require('react-dom-factories');
```
correct:
```
const DOM = require('react-dom-factories');
```
For CommonJS environments, the default export object `DOM` is accessed directly from the `require` call, not via destructuring.
DOM.div
wrong:
```
import { div } from 'react-dom-factories';
```
correct:
```
import DOM from 'react-dom-factories';
const myDiv = DOM.div(null, 'Hello');
```
Individual factory methods like `div`, `p`, or `span` are properties of the `DOM` object, not direct named exports from the `react-dom-factories` package.

Quickstart

This quickstart demonstrates how to import and use the `DOM` object from `react-dom-factories` to create a basic React component, then render it to the DOM using `ReactDOM.render`. It showcases the syntax for creating elements with properties and children, mimicking the pre-JSX factory pattern.

import ReactDOM from 'react-dom';
import DOM from 'react-dom-factories';

/**
 * A simple functional component using react-dom-factories to create elements.
 * This approach is largely superseded by JSX in modern React development.
 */
function LegacyApp() {
  const greetingMessage = DOM.p(null, 'Hello from react-dom-factories!');
  const container = DOM.div({ className: 'legacy-container' }, 
    DOM.h1(null, 'Legacy React App'), 
    greetingMessage
  );
  return container;
}

// Assuming an element with id 'app' exists in your HTML document
const appRoot = document.getElementById('app');

if (appRoot) {
  ReactDOM.render(LegacyApp(), appRoot);
  console.log('Legacy React App rendered using react-dom-factories.');
} else {
  console.error("Target element with id 'app' not found. Please ensure your HTML has <div id='app'></div>.");
}

view raw JSON →