CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-dom-factories

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

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

Usage Examples:

const { svg, circle, rect, path, text } = require('react-dom-factories');

// Simple SVG shapes
const simpleCircle = svg(
  { width: 100, height: 100, viewBox: '0 0 100 100' },
  circle({ cx: 50, cy: 50, r: 40, fill: 'blue' })
);

// Complex SVG graphic
const logo = svg(
  { width: 200, height: 100, viewBox: '0 0 200 100' },
  rect({ x: 10, y: 10, width: 80, height: 80, fill: 'red' }),
  circle({ cx: 150, cy: 50, r: 30, fill: 'green' }),
  text({ x: 100, y: 95, textAnchor: 'middle' }, 'Logo')
);

// Path-based graphics
const arrow = svg(
  { width: 50, height: 50, viewBox: '0 0 50 50' },
  path({ 
    d: 'M10,25 L35,10 L35,20 L45,20 L45,30 L35,30 L35,40 Z', 
    fill: 'black' 
  })
);

Types and Interfaces

// React types (from React library)
type ReactNode = string | number | ReactElement | ReactNode[];
type ReactElement = {
  type: string;
  props: object;
  key: string | number | null;
};

// Factory function type
type ElementFactory = {
  (props?: object, ...children: ReactNode[]): ReactElement;
  type: string; // The HTML/SVG tag name
};

// Main export object
type ReactDOMFactories = {
  // HTML elements
  a: ElementFactory;
  abbr: ElementFactory;
  address: ElementFactory;
  area: ElementFactory;
  article: ElementFactory;
  aside: ElementFactory;
  audio: ElementFactory;
  b: ElementFactory;
  base: ElementFactory;
  bdi: ElementFactory;
  bdo: ElementFactory;
  big: ElementFactory;
  blockquote: ElementFactory;
  body: ElementFactory;
  br: ElementFactory;
  button: ElementFactory;
  canvas: ElementFactory;
  caption: ElementFactory;
  cite: ElementFactory;
  code: ElementFactory;
  col: ElementFactory;
  colgroup: ElementFactory;
  data: ElementFactory;
  datalist: ElementFactory;
  dd: ElementFactory;
  del: ElementFactory;
  details: ElementFactory;
  dfn: ElementFactory;
  dialog: ElementFactory;
  div: ElementFactory;
  dl: ElementFactory;
  dt: ElementFactory;
  em: ElementFactory;
  embed: ElementFactory;
  fieldset: ElementFactory;
  figcaption: ElementFactory;
  figure: ElementFactory;
  footer: ElementFactory;
  form: ElementFactory;
  h1: ElementFactory;
  h2: ElementFactory;
  h3: ElementFactory;
  h4: ElementFactory;
  h5: ElementFactory;
  h6: ElementFactory;
  head: ElementFactory;
  header: ElementFactory;
  hgroup: ElementFactory;
  hr: ElementFactory;
  html: ElementFactory;
  i: ElementFactory;
  iframe: ElementFactory;
  img: ElementFactory;
  input: ElementFactory;
  ins: ElementFactory;
  kbd: ElementFactory;
  keygen: ElementFactory;
  label: ElementFactory;
  legend: ElementFactory;
  li: ElementFactory;
  link: ElementFactory;
  main: ElementFactory;
  map: ElementFactory;
  mark: ElementFactory;
  menu: ElementFactory;
  menuitem: ElementFactory;
  meta: ElementFactory;
  meter: ElementFactory;
  nav: ElementFactory;
  noscript: ElementFactory;
  object: ElementFactory;
  ol: ElementFactory;
  optgroup: ElementFactory;
  option: ElementFactory;
  output: ElementFactory;
  p: ElementFactory;
  param: ElementFactory;
  picture: ElementFactory;
  pre: ElementFactory;
  progress: ElementFactory;
  q: ElementFactory;
  rp: ElementFactory;
  rt: ElementFactory;
  ruby: ElementFactory;
  s: ElementFactory;
  samp: ElementFactory;
  script: ElementFactory;
  section: ElementFactory;
  select: ElementFactory;
  small: ElementFactory;
  source: ElementFactory;
  span: ElementFactory;
  strong: ElementFactory;
  style: ElementFactory;
  sub: ElementFactory;
  summary: ElementFactory;
  sup: ElementFactory;
  table: ElementFactory;
  tbody: ElementFactory;
  td: ElementFactory;
  textarea: ElementFactory;
  tfoot: ElementFactory;
  th: ElementFactory;
  thead: ElementFactory;
  time: ElementFactory;
  title: ElementFactory;
  tr: ElementFactory;
  track: ElementFactory;
  u: ElementFactory;
  ul: ElementFactory;
  var: ElementFactory;
  video: ElementFactory;
  wbr: ElementFactory;
  
  // SVG elements
  circle: ElementFactory;
  clipPath: ElementFactory;
  defs: ElementFactory;
  ellipse: ElementFactory;
  g: ElementFactory;
  image: ElementFactory;
  line: ElementFactory;
  linearGradient: ElementFactory;
  mask: ElementFactory;
  path: ElementFactory;
  pattern: ElementFactory;
  polygon: ElementFactory;
  polyline: ElementFactory;
  radialGradient: ElementFactory;
  rect: ElementFactory;
  stop: ElementFactory;
  svg: ElementFactory;
  text: ElementFactory;
  tspan: ElementFactory;
};

Legacy Notice

⚠️ Legacy Package: This package is considered legacy as of React 16.0.0. The React team recommends using modern alternatives:

  • JSX Syntax: Use JSX for element creation in modern React applications
  • React.createFactory(): Use React.createFactory(type) for programmatic element creation
  • React.createElement(): Use React.createElement(type, props, ...children) directly

This package should only be used for maintaining backward compatibility in existing applications that relied on the DOM factory pattern.

Install with Tessl CLI

npx tessl i tessl/npm-react-dom-factories

docs

index.md

tile.json