Skip to content

Commit

Permalink
Add with-context-api example (#5154)
Browse files Browse the repository at this point in the history
* Add with-context-api example

* Change next dependency to canary and fix CounterProvider import
  • Loading branch information
maurodaprotis authored and timneutkens committed Sep 14, 2018
1 parent 695f372 commit 1f64082
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 0 deletions.
44 changes: 44 additions & 0 deletions examples/with-context-api/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-context-api)

# Hello World example

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example with-context-api with-context-api-app
# or
yarn create next-app --example with-context-api with-context-api-app
```

### Download manually

Download the example:

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-context-api
cd with-context-api
```

Install it and run:

```bash
npm install
npm run dev
# or
yarn
yarn dev
```

Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

```bash
now
```

## The idea behind the example

This example shows how to use react context api in our app. Based on WesBos example.
43 changes: 43 additions & 0 deletions examples/with-context-api/components/CounterProvider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { Component } from 'react'

/* First we will make a new context */
const CounterContext = React.createContext()

/* Then create a provider Component */
class CounterProvider extends Component {
state = {
count: 0
}

increase = () => {
this.setState({
count: this.state.count + 1
})
}

decrease = () => {
this.setState({
count: this.state.count - 1
})
}

render () {
return (
<CounterContext.Provider
value={{
count: this.state.count,
increase: this.increase,
decrease: this.decrease
}}
>
{this.props.children}
</CounterContext.Provider>
)
}
}

/* then make a consumer which will surface it */
const CounterConsumer = CounterContext.Consumer

export default CounterProvider
export { CounterConsumer }
15 changes: 15 additions & 0 deletions examples/with-context-api/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "with-context-api",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^7.0.0-canary.16",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"license": "ISC"
}
19 changes: 19 additions & 0 deletions examples/with-context-api/pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import App, { Container } from 'next/app'
/* First we import our provider */
import CounterProvider from '../components/CounterProvider'

class MyApp extends App {
render () {
const { Component, pageProps } = this.props
return (
<Container>
{/* Then we wrap our components with the provider */}
<CounterProvider>
<Component {...pageProps} />
</CounterProvider>
</Container>
)
}
}

export default MyApp
20 changes: 20 additions & 0 deletions examples/with-context-api/pages/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React, { Component } from 'react'
/* First we import the consumer */
import { CounterConsumer } from '../components/CounterProvider'

export default class index extends Component {
render () {
return (
/* Then we use our context through render props */
<CounterConsumer>
{({ count, increase, decrease }) => (
<div>
<p>Counter: {count}</p>
<button onClick={increase}>Increase</button>
<button onClick={decrease}>Decrease</button>
</div>
)}
</CounterConsumer>
)
}
}

0 comments on commit 1f64082

Please sign in to comment.