Package Exports

patternplate-transform-react-mount

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (patternplate-transform-react-mount) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

patternplate-transform-react-mount

patternplate transform mounting react components with full life cycle on the client side.

Installation

npm install --save patternplate-transform-react-mount react react-dom

Transformation

Input

    module.exports = React.createClass({
        displayName: 'MyAwesomePattern',
        render: function() {
            return React.createElement('div', {className: 'my-awesome-pattern'}, 'My awesome Pattern.');
        }
    });

Output

    module.exports = React.createClass({
        displayName: 'MyAwesomePattern',
        render: function() {
            return React.createElement('div', {className: 'my-awesome-pattern'}, 'My awesome Pattern.');
        }
    });
    var mountableElement = React.createElement(module.exports);
    var mountElement = document.querySelector('[data-mountpoint]');
    React.render(mountableElement, mountElement);

Configuration

Install patternplate-transform-react-mount, patternplate-transform-react, patternplate-transform-react-to-markup, react and react-dom in your patternplate project.

No configuration parameters available yet

Component auto mounting

patternplate-transform-react-mount is triggered by patternplate-transform-react-to-markup. To enable auto mounting enable it in patternplate-transform-react-to-markup config.

⇨ See patternplate-transform-react-to-markup for details

React version interoperability

patternplate-transform-react-mount provides interoperability with react 0.13 and 0.14. The decision making on the used call happens according to these rules:

if React.version gte 0.14
    if require.resolve('react-dom') fails
        warn
        use React.render
    else if require.resolve('react') succeeds
        use ReactDOM.render
else
    use React.render

This means you can use react with and without react-dom - you'll see a warning with react >= 0.14, though:

[ ⚠ External Deprecation ⚠ ] React version 0.14.7 deprecated React.render and moved it to react-dom's render, but react-dom is not available via require.resolve. Consider installing react-dom.