<±/> diffHTML React Compat
Stable Version: 1.0.0-beta.30
This is a compatibility package meant to be a drop-in replacement for the
modules: react
and react-dom
. It wraps the diffHTML
Components repository as the base for the Component
constructor. It then layers additional React-specific APIs.
Installation
npm install diffhtml diffhtml-react-compat
Additional React APIs Included
- Synthentic Events middleware, enabled by default (React Docs)
-
React.createElement
- Creates a React-compatible Virtual Tree Element (React Docs) -
React.cloneElement
- Clones a Virtual Tree Element (React Docs) -
React.createFactory
- Creates a reusable function to produce Virtual Tree Elements (React Docs) -
React.isValidElement
- Determines if the Element is a React Virtual Tree Element (React Docs) -
React.Children
- Helpers for working withprops.children
(React Docs) -
ReactDOM.render
- Renders the top level component into the DOM (React Docs)
PropTypes
The PropTypes package has been extracted out of React into a standalone module
(npm i prop-types
) which can be used with both Component
and WebComponent
implementations.
If you are using Web Components please note that PropTypes are required so that the implementation knows which attributes to fire change events on.
See the MDN article on it for more information
Example using PropTypes with ES6:
import { html } from 'diffhtml';
import { Component } from 'diffhtml-components';
import PropTypes from 'prop-types';
class MyComponent extends Component {
render() {
const { className } = this.props;
return html`
<div class=${className}>${label}</div>
`;
}
}
MyComponent.propTypes = {
className: PropTypes.string.isRequired,
label: PropTypes.string,
};
Using with babel-plugin-transform-class-properties
:
import { html } from 'diffhtml';
import { Component } from 'diffhtml-components';
import PropTypes from 'prop-types';
class MyComponent extends Component {
render() {
const { className } = this.props;
return html`
<div class=${className}>${label}</div>
`;
}
static propTypes = {
className: PropTypes.string.isRequired,
label: PropTypes.string,
}
}
Also note that in order to fully remove PropTypes from a bundler, you will need to add additional configuration. Please consult the bundlers documentation for this until we add examples.