update example

Author: jamiebuilds

.gitignore

@@ -3,5 +3,6 @@ node_modules
 lib
 coverage
 .DS_Store
-*bundle.js
-package-lock.json
+examples/*/bundle.js
+examples/*/package-lock.json
+examples/*/yarn.lock

README.md

@@ -23,8 +23,8 @@ const Context = createReactContext(defaultValue);
 
 ```js
 // @flow
-import React from 'react';
-import createReactContext from 'create-react-context';
+import React, { type Node } from 'react';
+import createReactContext, { type Context } from 'create-react-context';
 
 type Theme = 'light' | 'dark';
 // Pass a default theme to ensure type correctness

examples/theme-example/index.html

@@ -6,6 +6,7 @@
  <style>
  body {
  background-color: pink;
+ font-family: cursive;
  }
  </style>
  </head>

examples/theme-example/index.js

@@ -1,13 +1,87 @@
 //@flow
-import React from 'react';
+import React, { type Node } from 'react';
 import { render } from 'react-dom';
-import { ThemeToggler, Title, Emoji } from './theme-context';
+import createReactContext, { type Context } from '../../src';
 
-const App = () => (
- <ThemeToggler>
- <Title>Really cool context</Title>
- <Emoji />
- </ThemeToggler>
-);
+type Theme = 'light' | 'dark';
+// Pass a default theme to ensure type correctness
+const ThemeContext: Context<Theme> = createReactContext('light');
 
-render(<App />, document.getElementById('container'));
+class ThemeToggler extends React.Component<
+ { children: Node },
+ { theme: Theme }
+> {
+ state = { theme: 'light' };
+ render() {
+ return (
+ // Pass the current context value to the Provider's `value` prop.
+ // Changes are detected using strict comparison (Object.is)
+ <ThemeContext.Provider value={this.state.theme}>
+ <button
+ onClick={() => {
+ this.setState(state => ({
+ theme: state.theme === 'light' ? 'dark' : 'light'
+ }));
+ }}
+ >
+ Toggle theme
+ </button>
+ {this.props.children}
+ </ThemeContext.Provider>
+ );
+ }
+}
+
+class Title extends React.Component<{ children: Node }> {
+ render() {
+ return (
+ // The Consumer uses a render prop API. Avoids conflicts in the
+ // props namespace.
+ <ThemeContext.Consumer>
+ {theme => (
+ <h1 style={{ color: theme === 'light' ? '#000' : '#fff' }}>
+ {this.props.children}
+ </h1>
+ )}
+ </ThemeContext.Consumer>
+ );
+ }
+}
+
+class Emoji extends React.Component<{}> {
+ render() {
+ return (
+ <ThemeContext.Consumer>
+ {theme => (
+ <div
+ style={{
+ fontSize: '35px',
+ background: 'white',
+ height: '40px',
+ width: '40px'
+ }}
+ >
+ {theme === 'light' ? '⚡️' : '🕶'}
+ </div>
+ )}
+ </ThemeContext.Consumer>
+ );
+ }
+}
+
+function App() {
+ return (
+ <ThemeToggler>
+ <Title>Really cool context</Title>
+ <Emoji />
+ </ThemeToggler>
+ );
+}
+
+let container = document.getElementById('container');
+
+if (!container) {
+ throw new Error('missing #container');
+}
+
+render(<App />, container);

examples/theme-example/package.json

@@ -1,14 +1,12 @@
 {
  "name": "theme-example",
  "version": "1.0.0",
- "description": "Example for create react context",
+ "description": "Example for create-react-context",
  "main": "index.js",
  "scripts": {
- "build": "webpack",
- "test": "echo \"Error: no test specified\" && exit 1"
+ "build": "webpack"
  },
- "author": "",
- "license": "ISC",
+ "license": "MIT",
  "dependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",