Updated with-context-api to include an about page and also events that pass data to context provider

examples/with-context-api/README.md

@@ -39,6 +39,15 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
 now
 ```
 
-## The idea behind the example
+## The idea behind the example*
 
-This example shows how to use react context api in our app. Based on WesBos example.
+This example shows how to use react context api in our app. 
+
+It provides an example of using `pages/_app.js` to include include the context api provider and then shows how both the `pages/index.js` and `pages/about.js` can both share the same data using the context api consumer.
+
+The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
+
+The `pages/about.js` shows how to, from the about page, how to pass an increment value from the about page into the context provider itself.
+
+
+**Based on WesBos example*.

examples/with-context-api/components/CounterProvider.js

@@ -15,6 +15,12 @@ class CounterProvider extends Component {
     })
   }
 
+  increaseBy = (val) => {
+    this.setState({
+      count: this.state.count + val
+    })
+  }
+
   decrease = () => {
     this.setState({
       count: this.state.count - 1
@@ -27,7 +33,8 @@ class CounterProvider extends Component {
         value={{
           count: this.state.count,
           increase: this.increase,
-          decrease: this.decrease
+          decrease: this.decrease,
+          increaseBy: this.increaseBy
         }}
       >
         {this.props.children}

examples/with-context-api/package.json

@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^7.0.0-canary.16",
+    "next": "^7.0.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },

examples/with-context-api/pages/about.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+/* First we import the consumer */
+import { CounterConsumer } from '../components/CounterProvider'
+import Link from 'next/link'
+
+export default class about extends Component {
+  render () {
+    return (
+      /* Then we use our context through render props */
+      <CounterConsumer>
+        {({ count, increase, increaseBy }) => (
+          <div>
+            <h1>ABOUT</h1>
+            <p>Counter: {count}</p>
+            <button onClick={increase}>Increase</button>
+            <button onClick={() => {
+              increaseBy(15)
+            }}>Increase By 15</button>
+            <p><Link href='/'>
+              <a>Home</a>
+            </Link></p>
+          </div>
+        )}
+      </CounterConsumer>
+    )
+  }
+}

examples/with-context-api/pages/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import Link from 'next/link'
 /* First we import the consumer */
 import { CounterConsumer } from '../components/CounterProvider'
 
@@ -9,9 +10,13 @@ export default class index extends Component {
       <CounterConsumer>
         {({ count, increase, decrease }) => (
           <div>
+            <h1>HOME</h1>
             <p>Counter: {count}</p>
             <button onClick={increase}>Increase</button>
             <button onClick={decrease}>Decrease</button>
+            <p><Link href='/about'>
+              <a>About</a>
+            </Link></p>
           </div>
         )}
       </CounterConsumer>