From 4c18678d54947811f1f557c1396e3a3e7ae120cb Mon Sep 17 00:00:00 2001
From: Remy Sharp <remy@remysharp.com>
Date: Mon, 30 Oct 2017 14:24:31 +0000
Subject: [PATCH] Create example of activeClassLink using withRouter (#3188)

---
 examples/active-class-name/README.md          | 29 +++++++++++++++++
 examples/active-class-name/components/Link.js | 18 +++++++++++
 examples/active-class-name/components/Nav.js  | 31 +++++++++++++++++++
 examples/active-class-name/package.json       | 16 ++++++++++
 examples/active-class-name/pages/about.js     |  8 +++++
 examples/active-class-name/pages/index.js     |  8 +++++
 6 files changed, 110 insertions(+)
 create mode 100644 examples/active-class-name/README.md
 create mode 100644 examples/active-class-name/components/Link.js
 create mode 100644 examples/active-class-name/components/Nav.js
 create mode 100644 examples/active-class-name/package.json
 create mode 100644 examples/active-class-name/pages/about.js
 create mode 100644 examples/active-class-name/pages/index.js

diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md
new file mode 100644
index 00000000..7f8b074e
--- /dev/null
+++ b/examples/active-class-name/README.md
@@ -0,0 +1,29 @@
+[![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
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/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`.
diff --git a/examples/active-class-name/components/Link.js b/examples/active-class-name/components/Link.js
new file mode 100644
index 00000000..6621c72c
--- /dev/null
+++ b/examples/active-class-name/components/Link.js
@@ -0,0 +1,18 @@
+import { withRouter } from 'next/router';
+import Link from 'next/link';
+import React, { Children } from 'react';
+
+const ActiveLink = ({ router, children, ...props }) => {
+  const child = Children.only(children);
+
+  let className = child.props.className || '';
+  if (router.pathname === props.href && props.activeClassName) {
+    className = `${className} ${props.activeClassName}`.trim();
+  }
+
+  delete props.activeClassName;
+
+  return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
+};
+
+export default withRouter(ActiveLink);
diff --git a/examples/active-class-name/components/Nav.js b/examples/active-class-name/components/Nav.js
new file mode 100644
index 00000000..e6249f5a
--- /dev/null
+++ b/examples/active-class-name/components/Nav.js
@@ -0,0 +1,31 @@
+import Link from './Link';
+import Head from 'next/head';
+
+export default () => (
+  <nav>
+    <style jsx>{`
+      .active:after {
+        content: ' (current page)';
+      }
+
+      .nav-link {
+        text-decoration: none;
+        padding: 10px;
+        display: block;
+      }
+    `}</style>
+
+    <ul>
+      <li>
+        <Link activeClassName="active" href="/">
+          <a className="nav-link home-link">Home</a>
+        </Link>
+      </li>
+      <li>
+        <Link activeClassName="active" href="/about">
+          <a className="nav-link">About</a>
+        </Link>
+      </li>
+    </ul>
+  </nav>
+);
diff --git a/examples/active-class-name/package.json b/examples/active-class-name/package.json
new file mode 100644
index 00000000..2af6844e
--- /dev/null
+++ b/examples/active-class-name/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "active-class-name",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "author": "Remy Sharp <remy@leftlogic.com>",
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}
diff --git a/examples/active-class-name/pages/about.js b/examples/active-class-name/pages/about.js
new file mode 100644
index 00000000..e6097671
--- /dev/null
+++ b/examples/active-class-name/pages/about.js
@@ -0,0 +1,8 @@
+import Nav from '../components/Nav';
+
+export default () => (
+  <div>
+    <Nav />
+    <p>Hello, I'm About.js</p>
+  </div>
+);
diff --git a/examples/active-class-name/pages/index.js b/examples/active-class-name/pages/index.js
new file mode 100644
index 00000000..3aa81e8c
--- /dev/null
+++ b/examples/active-class-name/pages/index.js
@@ -0,0 +1,8 @@
+import Nav from '../components/Nav';
+
+export default () => (
+  <div>
+    <Nav />
+    <p>Hello, I'm the home page</p>
+  </div>
+);