Home

Index

How to use the createElement function from react

Find comprehensive JavaScript react.createElement code examples handpicked from public code repositorys.

React.createElement is a function used to create a React element, which is the basic building block of React applications.

TextBG.js

24
25
26
27
28
29
30
31
32
33
return React.createElement(
  'g',
  {
    className: (this.props.className ? this.props.className : 'text-bg'),
  },
  React.createElement('rect', {
    className: 'text-bg-rect',
    x,
    y,
    rx: radius,

183

987

+ 5 other calls in file

readme.markdown?plain=1

GitHub: choojs/hyperx

67
68
69
70
71
72
73
74
75
76
var hx = hyperx(function createElement (component, properties, children) {
  // Pass children as separate arguments to avoid key warnings
  return React.createElement.apply(null, [component, properties].concat(children))
}, {
  createFragment: function createFragment (children) {
    return React.createElement.apply(null, [React.Fragment, {}].concat(children))
  }
})

var title = 'world'

997

+ 7 other calls in file

How does react.createElement work?

React.createElement is a method in React that creates a virtual DOM element with the specified type, props, and children. It is the core building block of a React application and is used to create React elements that represent components, HTML tags, or other custom elements. The createElement method takes three arguments - the element type, the element properties or "props", and the children elements - and returns a new React element that can be rendered to the browser DOM using ReactDOM.render.

fixture.js

GitHub: GoogleForCreators/web-stories-wp

157
158
159
160
161
162
163
164
165
166
 */
constructor({ mocks } = {}) {
  this._config = { ...FIXTURE_DEFAULT_CONFIG };

  this._componentStubs = new Map();
  const origCreateElement = React.createElement;
  //eslint-disable-next-line jasmine/no-unsafe-spy
  spyOn(React, 'createElement').and.callFake((type, props, ...children) => {
    if (!props?._wrapped) {
      const stubs = this._componentStubs.get(type);

187

715

constants.js

GitHub: esxjs/esx

4
5
6
7
8
9
10
11
12
13
/* istanbul ignore next */
const noop = () => {}
const REACT_PROVIDER_TYPE = Provider.$$typeof
const REACT_CONSUMER_TYPE = Consumer.$$typeof
const REACT_MEMO_TYPE = memo(noop).$$typeof
const REACT_ELEMENT_TYPE = createElement('div').$$typeof
const REACT_FORWARD_REF_TYPE = forwardRef(noop).$$typeof
const VOID_ELEMENTS = new Set([
  'area',
  'base',

647

Ai Example

1
2
3
4
5
const element = React.createElement(
  "h1",
  { className: "title" },
  "Hello, world!"
);

In this example, we are creating a React element that represents an h1 heading element with the class name of "title" and the content of "Hello, world!". The first argument to React.createElement is the type of element we want to create (in this case, an h1 element), the second argument is an object of props to pass to the element (in this case, the class name), and the third argument is the content of the element. The returned value element is a plain JavaScript object that represents the React element we just created, which can then be rendered to the DOM using ReactDOM.render.

browser.js

GitHub: esxjs/esx

59
60
61
62
63
64
65
66
67
68
      for (var n in dynChildren) {
        children[n] = values[dynChildren[n]]
      }
    }
    const reactChildren = children.length === 0 ? (props.children || null) : (children.length === 1 ? children[0] : children)
    root = reactChildren === null ? createElement(tag, props) : createElement(tag, props, reactChildren)
    map[i] = root
  }
  return root
}

647

+ 3 other calls in file

details.js

GitHub: cozy-labs/cozy-desktop

-2

AptList.js

GitHub: rvmey/TRIGGERcmd-Agent

221
222
223
224
225
226
227
228
229
230

{
  if (!didWarnAboutDeprecatedCreateFactory) {
    didWarnAboutDeprecatedCreateFactory = true;

    warn('React.createFactory() is deprecated and will be removed in ' + 'a future major release. Consider using JSX ' + 'or use React.createElement() directly instead.');
  } // Legacy hook: remove it


  Object.defineProperty(validatedFactory, 'type', {

renderTemplate.ts

GitHub: muil-io/muil

27
28
29
30
31
32
33
34
35
36
const ReactElement = reactElementVm.run(
  `
      const {createElement} = require('react');

      const ReactComponent = require('${tempFileName}');
      const ReactElement = createElement(ReactComponent.default, props);
      module.exports = ReactElement;
    `,
  'renderTemplate.js',
);

index.js

GitHub: koistya/gulp-render

35
36
37
38
39
40
41
42
43
44
 * into the specified layout, then render to a string.
 */
function renderToString(page) {
  var layout = null, child = null, props = {};
  while ((layout = page.type.layout || (page.defaultProps && page.defaultProps.layout))) {
    child = React.createElement(page, props, child);
    _.extend(props, page.defaultProps);
    React.renderToString(React.createElement(page, props, child));
    page = layout;
  }

ssg-kernel.js

GitHub: FlorianRappl/react-prerender-demo

34
35
36
37
38
39
40
41
42
43

const React = require('react');
const { MemoryRouter } = require('react-router');
const { renderToString } = require('react-dom/server');

React.lazy = () => () => React.createElement('div', undefined, 'Loading ...');
React.Suspense = ({ children }) => React.createElement(React.Fragment, undefined, children);
React.useLayoutEffect = () => {};

function setupExtensions(files) {

+ 15 other calls in file

index.js

GitHub: rtsao/react-fp

15
16
17
18
19
20
21
22
23
24
}
if (len === 1) {
    if (isRenderable(arg1)) {
        return React.createElement(type, null, arg1);
    } else if (Array.isArray(arg1)) {
        return React.createElement.apply(null, [type, null].concat(arg1));
    }
    return React.createElement(type, arg1);
}
if (len === 2) {

+ 17 other calls in file

tags-all.js

GitHub: marcuswestin/tags.js

68
69
70
71
72
73
74
75
76
77
                        } else {
                                children.push(val)
                        }
                })
                applyStyleDefaults(viewName, props)
                return React.createElement(viewSpecifier, props, ...children)
        }
}

function _isReactObj(arg) {

svg-logo.js

GitHub: system-ui/theme-ui

6
7
8
9
10
11
12
13
14
15
const React = require('react')
const { renderToStaticMarkup } = require('react-dom/server')
const Logo = require('../src/components/logo').default
const OGImage = require('../src/components/og-image').default

const h = React.createElement

const dirname = path.join(__dirname, '..', 'static')
const files = {}
const svg = {}

662

demo-browserEd.js

GitHub: ncsoft/Unreal.js

130
131
132
133
134
135
136
137
138
139
    }

    return ReactUMG.wrap(React.createElement(
        'span',
        null,
        item ? React.createElement('img', { Slot: { Padding: { Right: 1, Bottom: 1, Top: 1 } }, BrushDelegate: _ => editorStyle.GetBrush(item.is_json ? 'EditorViewport.WireframeMode' : widget.IsItemExpanded(item) ? 'ContentBrowser.AssetTreeFolderOpen' : 'ContentBrowser.AssetTreeFolderClosed') }) : [],
        item == widget.Items[0] ? React.createElement('uJavascriptTextBlock', { Font: SmallFont, Text: "데이터" }) : React.createElement('uJavascriptTextBlock', { Font: { FontObject: SmallFont.FontObject, Size: 10 }, SelectAllTextWhenFocused: true, ClearKeyboardFocusOnCommit: true, RevertTextOnEscape: true, Text: name })
    ));
},
OnGetChildren: (item, instance) => {

334

180

+ 11 other calls in file

skin-deep.js

GitHub: jdlehman/skin-deep

99
100
101
102
103
104
105
106
107
108
  var path = paths.shift();
  var rawTree = tree.subTree(path);
  if (!rawTree) throw new Error(path + ' not found in tree');
  var node = rawTree.getRenderOutput();
  tree = shallowRender(
    function() {return React.createElement(node.type, node.props)},
    context
  );
}
return tree;

server.js

GitHub: goatslacker/react-stdio

69
70
71
72
73
74
75
76
77
    'Cannot load component: %s',
    componentPath
  )

  render(
    React.createElement(component, props),
    callback
  )
}

QueryRepeatBlockInstance.js

GitHub: mWater/ui-builder

153
154
155
156
157
158
159
160
161
162
        case "none":
            return null;
        case "page_break":
            return React.createElement("div", { className: "page-break" });
        case "solid_line":
            return React.createElement("hr", null);
    }
}
renderRow(row, rowIndex) {
    const orientation = this.props.block.blockDef.orientation || "vertical";

+ 4 other calls in file

ContextVarInjector.js

GitHub: mWater/ui-builder

331
332
333
334
335
336
337
338
339
340
        return React.createElement("div", { className: "alert alert-danger" },
            "Error loading data: ",
            this.state.error.message);
    }
    if (!this.state.filters) {
        return React.createElement("div", null,
            React.createElement("i", { className: "fas fa-spinner fa-spin" }));
    }
    return this.props.children(this.createInnerProps(), this.state.loading, this.state.refreshing);
}

+ 2 other calls in file

dialogic-react.cjs

GitHub: ArthurClemens/dialogic

1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
function UseDialogic(props) {
  useDialogic(props);
  return null;
}
function UseDialog(props) {
  return /* @__PURE__ */ React.createElement(UseDialogic, { ...props, instance: dialog });
}
function UseNotification(props) {
  return /* @__PURE__ */ React.createElement(UseDialogic, { ...props, instance: notification });
}

+ 6 other calls in file

ssr-entry.js

GitHub: Flandre3569/vigor.js

1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
  default: MDXContent,
  frontmatter,
  toc
}, Symbol.toStringTag, { value: "Module" }));
const routes = [
  { path: "/b", element: React.createElement(B$1), preload: () => Promise.resolve().then(() => b$1) },
  { path: "/guide/a", element: React.createElement(MDXContent$1), preload: () => Promise.resolve().then(() => a) },
  { path: "/guide/b", element: React.createElement(B), preload: () => Promise.resolve().then(() => b) },
  { path: "/guide/c", element: React.createElement(C), preload: () => Promise.resolve().then(() => c) },
  { path: "/", element: React.createElement(MDXContent), preload: () => Promise.resolve().then(() => index) }

+ 6 other calls in file

Other functions in react

Sorted by popularity

react.default is the most popular function in react (505 examples)

Other popular packages:

Home

About