Registry / web-framework / react-dom-factories

react-dom-factories

library1.0.2jsnpmunverified

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.

web-framework

npm install react-dom-factories

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-DOM-FACTORIE

react-dom-factories

web-frameworkjavascriptv1.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

DOM

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

✗ 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

✓ const DOM = require('react-dom-factories');

✗ 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

✓ import DOM from 'react-dom-factories'; const myDiv = DOM.div(null, 'Hello');

✗ import { div } from 'react-dom-factories';

Individual factory methods like `div`, `p`, or `span` are properties of the `DOM` object, not direct named exports from the `react-dom-factories` package.

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>."); }

Debug

Known issues

deprecatedThe `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', ...)`.

affects: >=1.0.0

gotchaThis 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.

affects: >=1.0.2

gotchaThere 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.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: DOM.div is not a function

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.

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.

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

reactrequiredRuntime dependency for the React component model. This package provides an alternative syntax for creating React elements.

react-domrequiredRequired for rendering React elements into the DOM, as demonstrated in the quickstart example using `ReactDOM.render`.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/facebook/react ↗

packagehttps://www.npmjs.com/package/react-dom-factories ↗

homepagehttps://facebook.github.io/react/ ↗