[change] rename createDOMElement to createElement

Allow 'createElement' to be used as a drop-in replacement for
'ReactDOM.createElement'.
This commit is contained in:
Nicolas Gallagher
2017-09-10 10:20:29 -07:00
parent 4a680fd9b6
commit bae4dd806a
16 changed files with 59 additions and 50 deletions
+17 -8
View File
@@ -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) => <video {...props} style={[ { marginVertical: 10 }, props.style ]} />
```
Remember that React Native styles are not the same as React DOM styles, and
care needs to be taken not to pass React DOM styles into your React Native
wrapped components.
@@ -47,7 +55,8 @@ an API inspired by styled-components ([live
example](https://www.webpackbin.com/bins/-KjT9ziwv4O7FDZdvsnX)).
```js
const { createDOMElement, StyleSheet } = ReactNative;
import { createElement } from 'react-native-web';
import { StyleSheet } from 'react-native';
/**
* styled API
@@ -69,7 +78,7 @@ const styled = (Component, styler) => {
return (
isDOMComponent
? createDOMElement(Component, nextProps)
? createElement(Component, nextProps)
: <Component {...nextProps} />
);
}
+2 -2
View File
@@ -2,9 +2,9 @@
* @flow
*/
import { createDOMElement, StyleSheet } from 'react-native';
import { createElement, StyleSheet } from 'react-native';
const Code = props => createDOMElement('code', { ...props, style: [styles.code, props.style] });
const Code = props => createElement('code', { ...props, style: [styles.code, props.style] });
export default Code;