0
# React DOM Factories
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: react-dom-factories
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install react-dom-factories`
10
- **Peer Dependencies**: React (any version)
11
12
## Core Imports
13
14
```javascript
15
// Import the entire DOM factories object
16
const DOM = require('react-dom-factories');
17
18
// Import specific factories
19
const { div, p, span, button } = require('react-dom-factories');
20
```
21
22
ES Modules (if bundler supports):
23
24
```javascript
25
import DOM from 'react-dom-factories';
26
import { div, p, span, button } from 'react-dom-factories';
27
```
28
29
Browser global (requires React to be loaded globally first):
30
31
```javascript
32
// React must be available as window.React before loading this module
33
const DOM = window.ReactDOMFactories;
34
const { div, p } = DOM;
35
```
36
37
## Basic Usage
38
39
```javascript
40
const React = require('react');
41
const ReactDOM = require('react-dom');
42
const { div, p, span, button } = require('react-dom-factories');
43
44
// Create elements using factory functions
45
const greeting = div(
46
{ className: 'greeting' },
47
p(null, 'Hello, '),
48
span({ style: { fontWeight: 'bold' } }, 'World!'),
49
button({ onClick: () => alert('Clicked!') }, 'Click me')
50
);
51
52
// Render to DOM
53
ReactDOM.render(greeting, document.getElementById('app'));
54
```
55
56
## Architecture
57
58
React DOM Factories is built around a simple factory pattern:
59
60
- **Universal Module Definition (UMD)**: Supports CommonJS, AMD, and global variable usage
61
- **Factory Functions**: Each HTML/SVG element has a corresponding factory function
62
- **React.createElement Wrapper**: All factories internally use `React.createElement(type, props, ...children)`
63
- **Type Preservation**: Each factory function has a `type` property containing the element tag name
64
- **Peer Dependency**: Requires React to be available in the environment
65
66
## Capabilities
67
68
### HTML Element Factories
69
70
Pre-configured factory functions for all standard HTML elements. Each factory creates React elements of the specified type.
71
72
```javascript { .api }
73
// Factory function signature (applies to all HTML elements)
74
type ElementFactory = (props?: object, ...children: ReactNode[]) => ReactElement;
75
76
// HTML Element Factories
77
const a: ElementFactory; // <a> elements
78
const abbr: ElementFactory; // <abbr> elements
79
const address: ElementFactory; // <address> elements
80
const area: ElementFactory; // <area> elements
81
const article: ElementFactory; // <article> elements
82
const aside: ElementFactory; // <aside> elements
83
const audio: ElementFactory; // <audio> elements
84
const b: ElementFactory; // <b> elements
85
const base: ElementFactory; // <base> elements
86
const bdi: ElementFactory; // <bdi> elements
87
const bdo: ElementFactory; // <bdo> elements
88
const big: ElementFactory; // <big> elements
89
const blockquote: ElementFactory; // <blockquote> elements
90
const body: ElementFactory; // <body> elements
91
const br: ElementFactory; // <br> elements
92
const button: ElementFactory; // <button> elements
93
const canvas: ElementFactory; // <canvas> elements
94
const caption: ElementFactory; // <caption> elements
95
const cite: ElementFactory; // <cite> elements
96
const code: ElementFactory; // <code> elements
97
const col: ElementFactory; // <col> elements
98
const colgroup: ElementFactory; // <colgroup> elements
99
const data: ElementFactory; // <data> elements
100
const datalist: ElementFactory; // <datalist> elements
101
const dd: ElementFactory; // <dd> elements
102
const del: ElementFactory; // <del> elements
103
const details: ElementFactory; // <details> elements
104
const dfn: ElementFactory; // <dfn> elements
105
const dialog: ElementFactory; // <dialog> elements
106
const div: ElementFactory; // <div> elements
107
const dl: ElementFactory; // <dl> elements
108
const dt: ElementFactory; // <dt> elements
109
const em: ElementFactory; // <em> elements
110
const embed: ElementFactory; // <embed> elements
111
const fieldset: ElementFactory; // <fieldset> elements
112
const figcaption: ElementFactory; // <figcaption> elements
113
const figure: ElementFactory; // <figure> elements
114
const footer: ElementFactory; // <footer> elements
115
const form: ElementFactory; // <form> elements
116
const h1: ElementFactory; // <h1> elements
117
const h2: ElementFactory; // <h2> elements
118
const h3: ElementFactory; // <h3> elements
119
const h4: ElementFactory; // <h4> elements
120
const h5: ElementFactory; // <h5> elements
121
const h6: ElementFactory; // <h6> elements
122
const head: ElementFactory; // <head> elements
123
const header: ElementFactory; // <header> elements
124
const hgroup: ElementFactory; // <hgroup> elements
125
const hr: ElementFactory; // <hr> elements
126
const html: ElementFactory; // <html> elements
127
const i: ElementFactory; // <i> elements
128
const iframe: ElementFactory; // <iframe> elements
129
const img: ElementFactory; // <img> elements
130
const input: ElementFactory; // <input> elements
131
const ins: ElementFactory; // <ins> elements
132
const kbd: ElementFactory; // <kbd> elements
133
const keygen: ElementFactory; // <keygen> elements
134
const label: ElementFactory; // <label> elements
135
const legend: ElementFactory; // <legend> elements
136
const li: ElementFactory; // <li> elements
137
const link: ElementFactory; // <link> elements
138
const main: ElementFactory; // <main> elements
139
const map: ElementFactory; // <map> elements
140
const mark: ElementFactory; // <mark> elements
141
const menu: ElementFactory; // <menu> elements
142
const menuitem: ElementFactory; // <menuitem> elements
143
const meta: ElementFactory; // <meta> elements
144
const meter: ElementFactory; // <meter> elements
145
const nav: ElementFactory; // <nav> elements
146
const noscript: ElementFactory; // <noscript> elements
147
const object: ElementFactory; // <object> elements
148
const ol: ElementFactory; // <ol> elements
149
const optgroup: ElementFactory; // <optgroup> elements
150
const option: ElementFactory; // <option> elements
151
const output: ElementFactory; // <output> elements
152
const p: ElementFactory; // <p> elements
153
const param: ElementFactory; // <param> elements
154
const picture: ElementFactory; // <picture> elements
155
const pre: ElementFactory; // <pre> elements
156
const progress: ElementFactory; // <progress> elements
157
const q: ElementFactory; // <q> elements
158
const rp: ElementFactory; // <rp> elements
159
const rt: ElementFactory; // <rt> elements
160
const ruby: ElementFactory; // <ruby> elements
161
const s: ElementFactory; // <s> elements
162
const samp: ElementFactory; // <samp> elements
163
const script: ElementFactory; // <script> elements
164
const section: ElementFactory; // <section> elements
165
const select: ElementFactory; // <select> elements
166
const small: ElementFactory; // <small> elements
167
const source: ElementFactory; // <source> elements
168
const span: ElementFactory; // <span> elements
169
const strong: ElementFactory; // <strong> elements
170
const style: ElementFactory; // <style> elements
171
const sub: ElementFactory; // <sub> elements
172
const summary: ElementFactory; // <summary> elements
173
const sup: ElementFactory; // <sup> elements
174
const table: ElementFactory; // <table> elements
175
const tbody: ElementFactory; // <tbody> elements
176
const td: ElementFactory; // <td> elements
177
const textarea: ElementFactory; // <textarea> elements
178
const tfoot: ElementFactory; // <tfoot> elements
179
const th: ElementFactory; // <th> elements
180
const thead: ElementFactory; // <thead> elements
181
const time: ElementFactory; // <time> elements
182
const title: ElementFactory; // <title> elements
183
const tr: ElementFactory; // <tr> elements
184
const track: ElementFactory; // <track> elements
185
const u: ElementFactory; // <u> elements
186
const ul: ElementFactory; // <ul> elements
187
const var: ElementFactory; // <var> elements
188
const video: ElementFactory; // <video> elements
189
const wbr: ElementFactory; // <wbr> elements
190
```
191
192
**Usage Examples:**
193
194
```javascript
195
const { div, p, span, button, input, form, h1 } = require('react-dom-factories');
196
197
// Simple elements
198
const title = h1(null, 'Welcome');
199
const paragraph = p({ className: 'intro' }, 'This is a paragraph');
200
201
// Elements with attributes
202
const image = img({
203
src: 'logo.png',
204
alt: 'Company Logo',
205
width: 100,
206
height: 50
207
});
208
209
// Nested elements
210
const card = div(
211
{ className: 'card' },
212
h1(null, 'Card Title'),
213
p(null, 'Card description'),
214
button({ onClick: handleClick }, 'Action')
215
);
216
217
// Form elements
218
const loginForm = form(
219
{ onSubmit: handleSubmit },
220
input({ type: 'text', placeholder: 'Username', name: 'username' }),
221
input({ type: 'password', placeholder: 'Password', name: 'password' }),
222
button({ type: 'submit' }, 'Login')
223
);
224
```
225
226
### SVG Element Factories
227
228
Pre-configured factory functions for common SVG elements. Each factory creates React SVG elements of the specified type.
229
230
```javascript { .api }
231
// SVG Element Factories
232
const circle: ElementFactory; // <circle> elements
233
const clipPath: ElementFactory; // <clipPath> elements
234
const defs: ElementFactory; // <defs> elements
235
const ellipse: ElementFactory; // <ellipse> elements
236
const g: ElementFactory; // <g> elements
237
const image: ElementFactory; // <image> elements (SVG)
238
const line: ElementFactory; // <line> elements
239
const linearGradient: ElementFactory; // <linearGradient> elements
240
const mask: ElementFactory; // <mask> elements
241
const path: ElementFactory; // <path> elements
242
const pattern: ElementFactory; // <pattern> elements
243
const polygon: ElementFactory; // <polygon> elements
244
const polyline: ElementFactory; // <polyline> elements
245
const radialGradient: ElementFactory; // <radialGradient> elements
246
const rect: ElementFactory; // <rect> elements
247
const stop: ElementFactory; // <stop> elements
248
const svg: ElementFactory; // <svg> elements
249
const text: ElementFactory; // <text> elements (SVG)
250
const tspan: ElementFactory; // <tspan> elements
251
```
252
253
**Usage Examples:**
254
255
```javascript
256
const { svg, circle, rect, path, text } = require('react-dom-factories');
257
258
// Simple SVG shapes
259
const simpleCircle = svg(
260
{ width: 100, height: 100, viewBox: '0 0 100 100' },
261
circle({ cx: 50, cy: 50, r: 40, fill: 'blue' })
262
);
263
264
// Complex SVG graphic
265
const logo = svg(
266
{ width: 200, height: 100, viewBox: '0 0 200 100' },
267
rect({ x: 10, y: 10, width: 80, height: 80, fill: 'red' }),
268
circle({ cx: 150, cy: 50, r: 30, fill: 'green' }),
269
text({ x: 100, y: 95, textAnchor: 'middle' }, 'Logo')
270
);
271
272
// Path-based graphics
273
const arrow = svg(
274
{ width: 50, height: 50, viewBox: '0 0 50 50' },
275
path({
276
d: 'M10,25 L35,10 L35,20 L45,20 L45,30 L35,30 L35,40 Z',
277
fill: 'black'
278
})
279
);
280
```
281
282
## Types and Interfaces
283
284
```javascript { .api }
285
// React types (from React library)
286
type ReactNode = string | number | ReactElement | ReactNode[];
287
type ReactElement = {
288
type: string;
289
props: object;
290
key: string | number | null;
291
};
292
293
// Factory function type
294
type ElementFactory = {
295
(props?: object, ...children: ReactNode[]): ReactElement;
296
type: string; // The HTML/SVG tag name
297
};
298
299
// Main export object
300
type ReactDOMFactories = {
301
// HTML elements
302
a: ElementFactory;
303
abbr: ElementFactory;
304
address: ElementFactory;
305
area: ElementFactory;
306
article: ElementFactory;
307
aside: ElementFactory;
308
audio: ElementFactory;
309
b: ElementFactory;
310
base: ElementFactory;
311
bdi: ElementFactory;
312
bdo: ElementFactory;
313
big: ElementFactory;
314
blockquote: ElementFactory;
315
body: ElementFactory;
316
br: ElementFactory;
317
button: ElementFactory;
318
canvas: ElementFactory;
319
caption: ElementFactory;
320
cite: ElementFactory;
321
code: ElementFactory;
322
col: ElementFactory;
323
colgroup: ElementFactory;
324
data: ElementFactory;
325
datalist: ElementFactory;
326
dd: ElementFactory;
327
del: ElementFactory;
328
details: ElementFactory;
329
dfn: ElementFactory;
330
dialog: ElementFactory;
331
div: ElementFactory;
332
dl: ElementFactory;
333
dt: ElementFactory;
334
em: ElementFactory;
335
embed: ElementFactory;
336
fieldset: ElementFactory;
337
figcaption: ElementFactory;
338
figure: ElementFactory;
339
footer: ElementFactory;
340
form: ElementFactory;
341
h1: ElementFactory;
342
h2: ElementFactory;
343
h3: ElementFactory;
344
h4: ElementFactory;
345
h5: ElementFactory;
346
h6: ElementFactory;
347
head: ElementFactory;
348
header: ElementFactory;
349
hgroup: ElementFactory;
350
hr: ElementFactory;
351
html: ElementFactory;
352
i: ElementFactory;
353
iframe: ElementFactory;
354
img: ElementFactory;
355
input: ElementFactory;
356
ins: ElementFactory;
357
kbd: ElementFactory;
358
keygen: ElementFactory;
359
label: ElementFactory;
360
legend: ElementFactory;
361
li: ElementFactory;
362
link: ElementFactory;
363
main: ElementFactory;
364
map: ElementFactory;
365
mark: ElementFactory;
366
menu: ElementFactory;
367
menuitem: ElementFactory;
368
meta: ElementFactory;
369
meter: ElementFactory;
370
nav: ElementFactory;
371
noscript: ElementFactory;
372
object: ElementFactory;
373
ol: ElementFactory;
374
optgroup: ElementFactory;
375
option: ElementFactory;
376
output: ElementFactory;
377
p: ElementFactory;
378
param: ElementFactory;
379
picture: ElementFactory;
380
pre: ElementFactory;
381
progress: ElementFactory;
382
q: ElementFactory;
383
rp: ElementFactory;
384
rt: ElementFactory;
385
ruby: ElementFactory;
386
s: ElementFactory;
387
samp: ElementFactory;
388
script: ElementFactory;
389
section: ElementFactory;
390
select: ElementFactory;
391
small: ElementFactory;
392
source: ElementFactory;
393
span: ElementFactory;
394
strong: ElementFactory;
395
style: ElementFactory;
396
sub: ElementFactory;
397
summary: ElementFactory;
398
sup: ElementFactory;
399
table: ElementFactory;
400
tbody: ElementFactory;
401
td: ElementFactory;
402
textarea: ElementFactory;
403
tfoot: ElementFactory;
404
th: ElementFactory;
405
thead: ElementFactory;
406
time: ElementFactory;
407
title: ElementFactory;
408
tr: ElementFactory;
409
track: ElementFactory;
410
u: ElementFactory;
411
ul: ElementFactory;
412
var: ElementFactory;
413
video: ElementFactory;
414
wbr: ElementFactory;
415
416
// SVG elements
417
circle: ElementFactory;
418
clipPath: ElementFactory;
419
defs: ElementFactory;
420
ellipse: ElementFactory;
421
g: ElementFactory;
422
image: ElementFactory;
423
line: ElementFactory;
424
linearGradient: ElementFactory;
425
mask: ElementFactory;
426
path: ElementFactory;
427
pattern: ElementFactory;
428
polygon: ElementFactory;
429
polyline: ElementFactory;
430
radialGradient: ElementFactory;
431
rect: ElementFactory;
432
stop: ElementFactory;
433
svg: ElementFactory;
434
text: ElementFactory;
435
tspan: ElementFactory;
436
};
437
```
438
439
## Legacy Notice
440
441
**⚠️ Legacy Package**: This package is considered legacy as of React 16.0.0. The React team recommends using modern alternatives:
442
443
- **JSX Syntax**: Use JSX for element creation in modern React applications
444
- **React.createFactory()**: Use `React.createFactory(type)` for programmatic element creation
445
- **React.createElement()**: Use `React.createElement(type, props, ...children)` directly
446
447
This package should only be used for maintaining backward compatibility in existing applications that relied on the DOM factory pattern.