next.js/examples/active-class-name/README.md

[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/active-class-name)

# activeClassName example

## How to use

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:

```bash
npx create-next-app --example active-class-name active-class-name-app
# or
yarn create next-app --example active-class-name active-class-name-app
```

### Download manually

Download the example [or clone the repo](https://github.com/zeit/next.js):

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

Install it and run:

```bash
npm install
npm run dev
```

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

```bash
now
```

## The idea behind the example

ReactRouter has a convenience property on the `Link` element to allow an author to set the _active_ className on a link. This example replicates that functionality using Next's own `Link`.
Create example of activeClassLink using withRouter (#3188) 2017-10-30 14:24:31 +00:00			`[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/active-class-name)`

			`# activeClassName example`

			`## How to use`

examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 04:30:17 +00:00			### Using `create-next-app`

			Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:

Examples: use npx and yarn create to run create-next-app on examples (#4002) * remove global npm install of create-next-app * add npx to create-next-app command in examples * add bash to shell snippets * add yarn create to next-app command in examples * fix READMEs named with lowercase * change READMEs to use UPPERCASE 2018-03-14 08:09:46 +00:00			```bash
			`npx create-next-app --example active-class-name active-class-name-app`
			`# or`
			`yarn create next-app --example active-class-name active-class-name-app`
examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 04:30:17 +00:00			```

			`### Download manually`

Create example of activeClassLink using withRouter (#3188) 2017-10-30 14:24:31 +00:00			`Download the example [or clone the repo](https://github.com/zeit/next.js):`

			```bash
Use canary for all example downloads (#3411) 2017-12-07 02:12:42 +00:00			`curl https://codeload.github.com/zeit/next.js/tar.gz/canary \| tar -xz --strip=2 next.js-canary/examples/active-class-name`
Create example of activeClassLink using withRouter (#3188) 2017-10-30 14:24:31 +00:00			`cd active-class-name`
			```

			`Install it and run:`

			```bash
			`npm install`
			`npm run dev`
			```

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

			```bash
			`now`
			```

			`## The idea behind the example`

			ReactRouter has a convenience property on the `Link` element to allow an author to set the _active_ className on a link. This example replicates that functionality using Next's own `Link`.