lucid-ui/dist/components/Portal/examples/context.js

A UI component library from AppNexus.

import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import { Button, Portal } from '../../../index';
const context = React.createContext({
    display: 'hello',
});
class ExampleApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
            increment: () => {
                this.setState(({ counter }) => ({ counter: counter + 1 }));
            },
        };
    }
    render() {
        return (React.createElement(context.Provider, { value: this.state }, this.props.children));
    }
}
ExampleApp.propTypes = {
    children: PropTypes.node,
};
export default createClass({
    render() {
        return (React.createElement(ExampleApp, null,
            React.createElement(context.Consumer, null, ({ counter, increment }) => (React.createElement("div", null,
                React.createElement("h1", null,
                    "counter: ",
                    counter),
                React.createElement(Button, { kind: 'primary', onClick: increment }, "increment")))),
            React.createElement(Portal, { style: {
                    marginTop: 20,
                    border: '1px solid #333',
                    padding: 10,
                    width: 100,
                    height: 100,
                    backgroundColor: 'yellow',
                } },
                React.createElement(context.Consumer, null, ({ counter, increment }) => (React.createElement("div", null,
                    "inside the portal counter: ",
                    counter,
                    React.createElement(Button, { kind: 'primary', onClick: increment }, "increment")))))));
    },
});