update react support, context & hooks (#89)

examples/context.jsx

@@ -0,0 +1,66 @@
+import React, { Component, createContext } from 'react';
+import blessed from 'blessed';
+import {render} from '../src';
+
+// this is a bit weird, since the context provider & consumer and components are all in the same file
+// normally these would all be in different places, so the provider's children can grab the context from anywhere
+
+const DemoContext = createContext()
+const { Provider, Consumer } = DemoContext
+
+// app-level provider of demo context
+class DemoProvider extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      demo: 0
+    }
+    this.setDemo = this.setDemo.bind(this)
+  }
+
+  setDemo (value) {
+    this.setState({ ...this.state, demo: value })
+  }
+
+  render () {
+    return (
+      <Provider value={{ demo: this.state.demo, setDemo: this.setDemo }}>{this.props.children}</Provider>
+    )
+  }
+}
+
+// wrap a component with demo context consumer
+const withDemo = Component => props => (
+  <Consumer>{(context) => (<Component {...props} {...context} />)}</Consumer>
+)
+
+class AppInner extends Component {
+  render() {
+    const { demo, setDemo } = this.props
+    return (
+      <box label="react-blessed context demo"
+           border={{type: 'line'}}
+           style={{border: {fg: 'cyan'}}}>
+
+        {demo}
+
+        <button mouse border={{type: 'line'}} height={3} width={3} top={2} left={4} onPress={a => setDemo(demo + 1)}>+</button>
+        <button mouse border={{type: 'line'}} height={3} width={3} top={2} onPress={a => setDemo(demo - 1)}>-</button>
+      </box>
+    );
+  }
+}
+
+const App = withDemo(AppInner)
+
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: 'react-blessed context demo'
+});
+
+screen.key(['escape', 'q', 'C-c'], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<DemoProvider><App /></DemoProvider>, screen);

examples/hooks.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import blessed from 'blessed';
+import { render } from '../src';
+
+// NOTE: hooks require react@next version, but will probly be in 16.7.0
+
+const App = () => {
+  const [ demo, setDemo ] = useState(0)
+  return (
+    <box label="react-blessed hooks demo"
+         border={{type: 'line'}}
+         style={{border: {fg: 'cyan'}}}>
+
+      {demo}
+
+      <button mouse border={{type: 'line'}} height={3} width={3} top={2} left={4} onPress={a => setDemo(demo + 1)}>+</button>
+      <button mouse border={{type: 'line'}} height={3} width={3} top={2} onPress={a => setDemo(demo - 1)}>-</button>
+    </box>
+  );
+}
+
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: 'react-blessed hooks demo'
+});
+
+screen.key(['escape', 'q', 'C-c'], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<App />, screen);