diff --git a/benchmarks/src/components/Icons/DirectMessage.js b/benchmarks/src/components/Icons/DirectMessage.js index 579f54e1..483be408 100644 --- a/benchmarks/src/components/Icons/DirectMessage.js +++ b/benchmarks/src/components/Icons/DirectMessage.js @@ -1,9 +1,10 @@ -import { createDOMElement } from 'react-native'; +/* eslint-disable react/prop-types */ +import { createElement } from 'react-native'; import React from 'react'; import styles from './styles'; const IconDirectMessage = props => - createDOMElement('svg', { + createElement('svg', { children: ( diff --git a/benchmarks/src/components/Icons/Heart.js b/benchmarks/src/components/Icons/Heart.js index 4194e53b..0c18131b 100644 --- a/benchmarks/src/components/Icons/Heart.js +++ b/benchmarks/src/components/Icons/Heart.js @@ -1,9 +1,10 @@ -import { createDOMElement } from 'react-native'; +/* eslint-disable react/prop-types */ +import { createElement } from 'react-native'; import React from 'react'; import styles from './styles'; const IconHeart = props => - createDOMElement('svg', { + createElement('svg', { children: ( diff --git a/benchmarks/src/components/Icons/Reply.js b/benchmarks/src/components/Icons/Reply.js index eef6ab0a..8b40ae4d 100644 --- a/benchmarks/src/components/Icons/Reply.js +++ b/benchmarks/src/components/Icons/Reply.js @@ -1,9 +1,10 @@ -import { createDOMElement } from 'react-native'; +/* eslint-disable react/prop-types */ +import { createElement } from 'react-native'; import React from 'react'; import styles from './styles'; const IconReply = props => - createDOMElement('svg', { + createElement('svg', { children: ( diff --git a/benchmarks/src/components/Icons/Retweet.js b/benchmarks/src/components/Icons/Retweet.js index b06e8468..1db41c25 100644 --- a/benchmarks/src/components/Icons/Retweet.js +++ b/benchmarks/src/components/Icons/Retweet.js @@ -1,9 +1,10 @@ -import { createDOMElement } from 'react-native'; +/* eslint-disable react/prop-types */ +import { createElement } from 'react-native'; import React from 'react'; import styles from './styles'; const IconRetweet = props => - createDOMElement('svg', { + createElement('svg', { children: ( diff --git a/docs/guides/advanced.md b/docs/guides/advanced.md index f3f235de..840af709 100644 --- a/docs/guides/advanced.md +++ b/docs/guides/advanced.md @@ -2,7 +2,7 @@ ## Use with existing React DOM components -React Native for Web exports a web-specific module called `createDOMElement`, +React Native for Web exports a web-specific module called `createElement`, which can be used to wrap React DOM components. This allows you to use React Native's accessibility and style optimizations. @@ -11,9 +11,8 @@ In the example below, `Video` will now accept common React Native props such as props. ```js -import { createDOMElement } from 'react-native'; - -const Video = (props) => createDOMElement('video', props); +import { createElement } from 'react-native-web'; +const Video = (props) => createElement('video', props); ``` This also works with composite components defined in your existing component @@ -21,9 +20,10 @@ gallery or dependencies ([live example](https://www.webpackbin.com/bins/-KiTSGFw ```js import RaisedButton from 'material-ui/RaisedButton'; -import { createDOMElement, StyleSheet } from 'react-native'; +import { createElement } from 'react-native-web'; +import { StyleSheet } from 'react-native'; -const CustomButton = (props) => createDOMElement(RaisedButton, { +const CustomButton = (props) => createElement(RaisedButton, { ...props, style: [ styles.button, props.style ] }); @@ -35,6 +35,14 @@ const styles = StyleSheet.create({ }); ``` +And `createElement` can be used as drop-in replacement for `React.createElement`: + +```js +/* @jsx createElement */ +import { createElement } from 'react-native-web'; +const Video = (props) =>