createFactory

const factory = createFactory(type)

• Usage
  • Creating React elements with a factory
• Alternatives
  • Copying createFactory into your project
  • Replacing createFactory with createElement
  • Replacing createFactory with JSX
• Reference
  • createFactory(type)

Usage

Creating React elements with a factory

Although most React projects use JSX to describe the user interface, JSX is not required. In the past, createFactory used to be one of the ways you could describe the user interface without JSX.

Call createFactory to create a factory function for a specific element type like 'button':

import { createFactory } from 'react';

const button = createFactory('button');

Calling that factory function will produce React elements with the props and children you have provided:

This is how createFactory was used as an alternative to JSX. However, createFactory is deprecated, and you should not call createFactory in any new code. See how to migrate away from createFactory below.

Alternatives

Copying createFactory into your project

If your project has many createFactory calls, copy this createFactory.js implementation into your project:

This lets you keep all of your code unchanged except the imports.

Replacing createFactory with createElement

If you have a few createFactory calls that you don’t mind porting manually, and you don’t want to use JSX, you can replace every call a factory function with a createElement call. For example, you can replace this code:

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

with this code:

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

Here is a complete example of using React without JSX:

Replacing createFactory with JSX

Finally, you can use JSX instead of createFactory. This is the most common way to use React:

function Heading({ isSubheading, ...props }) {
  const type = isSubheading ? 'h2' : 'h1';
  const factory = createFactory(type);
  return factory(props);
}

function Heading({ isSubheading, ...props }) {
  const Type = isSubheading ? 'h2' : 'h1';
  return <Type {...props} />;
}

Reference

createFactory(type)

Call createFactory(type) to create a factory function which produces React elements of a given type.

import { createFactory } from 'react';

const button = createFactory('button');

Then you can use it to create React elements without JSX:

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

Parameters

• type: The type argument must be a valid React component type. For example, it could be a tag name string (such as 'div' or 'span'), or a React component (a function, a class, or a special component like Fragment).

Returns

Returns a factory function. That factory function receives a props object as the first argument, followed by a list of ...children arguments, and returns a React element with the given type, props and children.