or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-react-dom-factories

React package providing legacy DOM factory methods for programmatic HTML and SVG element creation.

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-dom-factories@1.0.x

To install, run

npx @tessl/cli install tessl/npm-react-dom-factories@1.0.0

React DOM Factories

React DOM Factories is a legacy React add-on that provides pre-configured DOM factory methods for creating HTML and SVG elements programmatically. Originally part of React core before version 16.0.0, these factories were extracted into a separate package to maintain backward compatibility for applications that relied on the factory pattern instead of JSX.

Package Information

Package Name: react-dom-factories
Package Type: npm
Language: JavaScript
Installation: npm install react-dom-factories
Peer Dependencies: React (any version)

Core Imports

// Import the entire DOM factories object
const DOM = require('react-dom-factories');

// Import specific factories
const { div, p, span, button } = require('react-dom-factories');

ES Modules (if bundler supports):

import DOM from 'react-dom-factories';
import { div, p, span, button } from 'react-dom-factories';

Browser global (requires React to be loaded globally first):

// React must be available as window.React before loading this module
const DOM = window.ReactDOMFactories;
const { div, p } = DOM;

Basic Usage

const React = require('react');
const ReactDOM = require('react-dom');
const { div, p, span, button } = require('react-dom-factories');

// Create elements using factory functions
const greeting = div(
  { className: 'greeting' },
  p(null, 'Hello, '),
  span({ style: { fontWeight: 'bold' } }, 'World!'),
  button({ onClick: () => alert('Clicked!') }, 'Click me')
);

// Render to DOM
ReactDOM.render(greeting, document.getElementById('app'));

Architecture

React DOM Factories is built around a simple factory pattern:

Universal Module Definition (UMD): Supports CommonJS, AMD, and global variable usage
Factory Functions: Each HTML/SVG element has a corresponding factory function
React.createElement Wrapper: All factories internally use React.createElement(type, props, ...children)
Type Preservation: Each factory function has a type property containing the element tag name
Peer Dependency: Requires React to be available in the environment

Capabilities

HTML Element Factories

Pre-configured factory functions for all standard HTML elements. Each factory creates React elements of the specified type.

// Factory function signature (applies to all HTML elements)
type ElementFactory = (props?: object, ...children: ReactNode[]) => ReactElement;

// HTML Element Factories
const a: ElementFactory;           // <a> elements
const abbr: ElementFactory;        // <abbr> elements  
const address: ElementFactory;     // <address> elements
const area: ElementFactory;        // <area> elements
const article: ElementFactory;     // <article> elements
const aside: ElementFactory;       // <aside> elements
const audio: ElementFactory;       // <audio> elements
const b: ElementFactory;           // <b> elements
const base: ElementFactory;        // <base> elements
const bdi: ElementFactory;         // <bdi> elements
const bdo: ElementFactory;         // <bdo> elements
const big: ElementFactory;         // <big> elements
const blockquote: ElementFactory;  // <blockquote> elements
const body: ElementFactory;        // <body> elements
const br: ElementFactory;          // <br> elements
const button: ElementFactory;      // <button> elements
const canvas: ElementFactory;      // <canvas> elements
const caption: ElementFactory;     // <caption> elements
const cite: ElementFactory;        // <cite> elements
const code: ElementFactory;        // <code> elements
const col: ElementFactory;         // <col> elements
const colgroup: ElementFactory;    // <colgroup> elements
const data: ElementFactory;        // <data> elements
const datalist: ElementFactory;    // <datalist> elements
const dd: ElementFactory;          // <dd> elements
const del: ElementFactory;         // <del> elements
const details: ElementFactory;     // <details> elements
const dfn: ElementFactory;         // <dfn> elements
const dialog: ElementFactory;      // <dialog> elements
const div: ElementFactory;         // <div> elements
const dl: ElementFactory;          // <dl> elements
const dt: ElementFactory;          // <dt> elements
const em: ElementFactory;          // <em> elements
const embed: ElementFactory;       // <embed> elements
const fieldset: ElementFactory;    // <fieldset> elements
const figcaption: ElementFactory;  // <figcaption> elements
const figure: ElementFactory;      // <figure> elements
const footer: ElementFactory;      // <footer> elements
const form: ElementFactory;        // <form> elements
const h1: ElementFactory;          // <h1> elements
const h2: ElementFactory;          // <h2> elements
const h3: ElementFactory;          // <h3> elements
const h4: ElementFactory;          // <h4> elements
const h5: ElementFactory;          // <h5> elements
const h6: ElementFactory;          // <h6> elements
const head: ElementFactory;        // <head> elements
const header: ElementFactory;      // <header> elements
const hgroup: ElementFactory;      // <hgroup> elements
const hr: ElementFactory;          // <hr> elements
const html: ElementFactory;        // <html> elements
const i: ElementFactory;           // <i> elements
const iframe: ElementFactory;      // <iframe> elements
const img: ElementFactory;         // <img> elements
const input: ElementFactory;       // <input> elements
const ins: ElementFactory;         // <ins> elements
const kbd: ElementFactory;         // <kbd> elements
const keygen: ElementFactory;      // <keygen> elements
const label: ElementFactory;       // <label> elements
const legend: ElementFactory;      // <legend> elements
const li: ElementFactory;          // <li> elements
const link: ElementFactory;        // <link> elements
const main: ElementFactory;        // <main> elements
const map: ElementFactory;         // <map> elements
const mark: ElementFactory;        // <mark> elements
const menu: ElementFactory;        // <menu> elements
const menuitem: ElementFactory;    // <menuitem> elements
const meta: ElementFactory;        // <meta> elements
const meter: ElementFactory;       // <meter> elements
const nav: ElementFactory;         // <nav> elements
const noscript: ElementFactory;    // <noscript> elements
const object: ElementFactory;      // <object> elements
const ol: ElementFactory;          // <ol> elements
const optgroup: ElementFactory;    // <optgroup> elements
const option: ElementFactory;      // <option> elements
const output: ElementFactory;      // <output> elements
const p: ElementFactory;           // <p> elements
const param: ElementFactory;       // <param> elements
const picture: ElementFactory;     // <picture> elements
const pre: ElementFactory;         // <pre> elements
const progress: ElementFactory;    // <progress> elements
const q: ElementFactory;           // <q> elements
const rp: ElementFactory;          // <rp> elements
const rt: ElementFactory;          // <rt> elements
const ruby: ElementFactory;        // <ruby> elements
const s: ElementFactory;           // <s> elements
const samp: ElementFactory;        // <samp> elements
const script: ElementFactory;      // <script> elements
const section: ElementFactory;     // <section> elements
const select: ElementFactory;      // <select> elements
const small: ElementFactory;       // <small> elements
const source: ElementFactory;      // <source> elements
const span: ElementFactory;        // <span> elements
const strong: ElementFactory;      // <strong> elements
const style: ElementFactory;       // <style> elements
const sub: ElementFactory;         // <sub> elements
const summary: ElementFactory;     // <summary> elements
const sup: ElementFactory;         // <sup> elements
const table: ElementFactory;       // <table> elements
const tbody: ElementFactory;       // <tbody> elements
const td: ElementFactory;          // <td> elements
const textarea: ElementFactory;    // <textarea> elements
const tfoot: ElementFactory;       // <tfoot> elements
const th: ElementFactory;          // <th> elements
const thead: ElementFactory;       // <thead> elements
const time: ElementFactory;        // <time> elements
const title: ElementFactory;       // <title> elements
const tr: ElementFactory;          // <tr> elements
const track: ElementFactory;       // <track> elements
const u: ElementFactory;           // <u> elements
const ul: ElementFactory;          // <ul> elements
const var: ElementFactory;         // <var> elements
const video: ElementFactory;       // <video> elements
const wbr: ElementFactory;         // <wbr> elements

Usage Examples:

const { div, p, span, button, input, form, h1 } = require('react-dom-factories');

// Simple elements
const title = h1(null, 'Welcome');
const paragraph = p({ className: 'intro' }, 'This is a paragraph');

// Elements with attributes
const image = img({ 
  src: 'logo.png', 
  alt: 'Company Logo',
  width: 100,
  height: 50 
});

// Nested elements
const card = div(
  { className: 'card' },
  h1(null, 'Card Title'),
  p(null, 'Card description'),
  button({ onClick: handleClick }, 'Action')
);

// Form elements
const loginForm = form(
  { onSubmit: handleSubmit },
  input({ type: 'text', placeholder: 'Username', name: 'username' }),
  input({ type: 'password', placeholder: 'Password', name: 'password' }),
  button({ type: 'submit' }, 'Login')
);

SVG Element Factories

Pre-configured factory functions for common SVG elements. Each factory creates React SVG elements of the specified type.

// SVG Element Factories
const circle: ElementFactory;        // <circle> elements
const clipPath: ElementFactory;      // <clipPath> elements
const defs: ElementFactory;          // <defs> elements
const ellipse: ElementFactory;       // <ellipse> elements
const g: ElementFactory;             // <g> elements
const image: ElementFactory;         // <image> elements (SVG)
const line: ElementFactory;          // <line> elements
const linearGradient: ElementFactory; // <linearGradient> elements
const mask: ElementFactory;          // <mask> elements
const path: ElementFactory;          // <path> elements
const pattern: ElementFactory;       // <pattern> elements
const polygon: ElementFactory;       // <polygon> elements
const polyline: ElementFactory;      // <polyline> elements
const radialGradient: ElementFactory; // <radialGradient> elements
const rect: ElementFactory;          // <rect> elements
const stop: ElementFactory;          // <stop> elements
const svg: ElementFactory;           // <svg> elements
const text: ElementFactory;          // <text> elements (SVG)
const tspan: ElementFactory;         // <tspan> elements