1 files changed, 69 insertions, 0 deletions
diff --git a/preact/demo/context.js b/preact/demo/context.js
new file mode 100644
index 0000000..3fe3bc0
--- /dev/null
+++ b/preact/demo/context.js
@@ -0,0 +1,69 @@
+// eslint-disable-next-line no-unused-vars
+import { createElement, Component, createContext, Fragment } from 'preact';
+const { Provider, Consumer } = createContext();
+
+class ThemeProvider extends Component {
+	state = {
+		value: this.props.value
+	};
+
+	onClick = () => {
+		this.setState(prev => ({
+			value:
+				prev.value === this.props.value ? this.props.next : this.props.value
+		}));
+	};
+
+	render() {
+		return (
+			<div>
+				<button onClick={this.onClick}>Toggle</button>
+				<Provider value={this.state.value}>{this.props.children}</Provider>
+			</div>
+		);
+	}
+}
+
+class Child extends Component {
+	shouldComponentUpdate() {
+		return false;
+	}
+
+	render() {
+		return (
+			<>
+				<p>(blocked update)</p>
+				{this.props.children}
+			</>
+		);
+	}
+}
+
+export default class ContextDemo extends Component {
+	render() {
+		return (
+			<ThemeProvider value="blue" next="red">
+				<Child>
+					<Consumer>
+						{data => (
+							<div>
+								<p>
+									current theme: <b>{data}</b>
+								</p>
+								<ThemeProvider value="black" next="white">
+									<Consumer>
+										{data => (
+											<p>
+												current sub theme: <b>{data}</b>
+											</p>
+										)}
+									</Consumer>
+								</ThemeProvider>
+							</div>
+						)}
+					</Consumer>
+				</Child>
+			</ThemeProvider>
+		);
+	}
+}