Add instructions for usage with React Router

src/CSSTransition.js

@@ -121,10 +121,6 @@ const propTypes = {
  * When the `in` prop is toggled to `true` the Component will get
  * the `example-enter` CSS class and the `example-enter-active` CSS class
  * added in the next tick. This is a convention based on the `classNames` prop.
- *
- * ## Example
- *
- * <iframe src="https://codesandbox.io/embed/m77l2vp00x?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
  */
 class CSSTransition extends React.Component {
   onEnter = (node, appearing) => {

src/Transition.js

@@ -105,11 +105,6 @@ export const EXITING = 'exiting'
  * > (read [this issue](https://github.com/reactjs/react-transition-group/issues/159#issuecomment-322761171)
  * > for more info). Take this into account when choosing between `Transition` and
  * > `CSSTransition`.
- *
- * ## Example
- *
- * <iframe src="https://codesandbox.io/embed/741op4mmj0?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
- *
  */
 class Transition extends React.Component {
   static contextTypes = {

src/TransitionGroup.js

@@ -66,24 +66,18 @@ const defaultProps = {
 }
 
 /**
- * The `<TransitionGroup>` component manages a set of `<Transition>` components
- * in a list. Like with the `<Transition>` component, `<TransitionGroup>`, is a
- * state machine for managing the mounting and unmounting of components over
- * time.
+ * The `<TransitionGroup>` component manages a set of transition components
+ * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
+ * components, `<TransitionGroup>` is a state machine for managing the mounting
+ * and unmounting of components over time.
  *
- * Consider the example below using the `Fade` CSS transition from before.
- * As items are removed or added to the TodoList the `in` prop is toggled
- * automatically by the `<TransitionGroup>`. You can use _any_ `<Transition>`
- * component in a `<TransitionGroup>`, not just css.
- *
- * ## Example
- *
- * <iframe src="https://codesandbox.io/embed/00rqyo26kn?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+ * Consider the example below. As items are removed or added to the TodoList the
+ * `in` prop is toggled automatically by the `<TransitionGroup>`.
  *
  * Note that `<TransitionGroup>`  does not define any animation behavior!
- * Exactly _how_ a list item animates is up to the individual `<Transition>`
- * components. This means you can mix and match animations across different
- * list items.
+ * Exactly _how_ a list item animates is up to the individual transition
+ * component. This means you can mix and match animations across different list
+ * items.
  */
 class TransitionGroup extends React.Component {
   static childContextTypes = {

www/gatsby-config.js

@@ -6,9 +6,21 @@ module.exports = {
     title: 'React Transition Group Documentation',
     author: 'Jason Quense',
     componentPages: [
-      { path: '/transition', displayName: 'Transition' },
-      { path: '/css-transition', displayName: 'CSSTransition' },
-      { path: '/transition-group', displayName: 'TransitionGroup' },
+      {
+        path: '/transition',
+        displayName: 'Transition',
+        codeSandboxId: '741op4mmj0',
+      },
+      {
+        path: '/css-transition',
+        displayName: 'CSSTransition',
+        codeSandboxId: 'm77l2vp00x',
+      },
+      {
+        path: '/transition-group',
+        displayName: 'TransitionGroup',
+        codeSandboxId: '00rqyo26kn',
+      },
     ],
   },
   plugins: [

www/package.json

@@ -20,7 +20,9 @@
     "gatsby-transformer-react-docgen": "^2.1.1-beta.3",
     "gatsby-transformer-remark": "^1.0.0",
     "lodash": "^4.17.4",
-    "react-bootstrap": "^0.32.1"
+    "react": "^16.4.1",
+    "react-bootstrap": "^0.32.1",
+    "react-dom": "^16.4.1"
   },
   "devDependencies": {
     "gh-pages": "^1.0.0",

www/src/components/Example.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'react-bootstrap';
+
+const propTypes = {
+  codeSandbox: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+const Example = ({ codeSandbox }) => (
+  <div>
+    <Grid>
+      <h2>Example</h2>
+    </Grid>
+    <div
+      dangerouslySetInnerHTML={{
+        __html: `
+          <iframe
+            title="${codeSandbox.title}"
+            src="https://codesandbox.io/embed/${codeSandbox.id}?fontsize=14"
+            style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+            sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+          />`,
+      }}
+    />
+  </div>
+);
+
+Example.propTypes = propTypes;
+
+export default Example;

www/src/components/Layout.js

@@ -1,8 +1,8 @@
-import { graphql, Link } from 'gatsby';
+import { graphql, Link, withPrefix } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Grid, Navbar, Nav } from 'react-bootstrap';
+import { Navbar, Nav } from 'react-bootstrap';
 
 import '../css/bootstrap.scss';
 import '../css/prism-theme.scss';
@@ -20,25 +20,45 @@ const propTypes = {
       }).isRequired,
     }).isRequired,
   }).isRequired,
-  location: PropTypes.object.isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
-const NavItem = ({ active, to, children }) => (
-  <li role="presentation" className={active ? 'active' : null}>
-    <Link aria-selected={active} to={to}>
+const NavItem = ({ to, location, children }) => (
+  <li role="presentation">
+    <Link
+      to={to}
+      location={location}
+      activeStyle={{
+        color: '#fff',
+        backgroundColor: '#080808',
+      }}
+    >
       {children}
     </Link>
   </li>
 );
 
 NavItem.propTypes = {
-  active: PropTypes.bool,
   to: PropTypes.string.isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 class Layout extends React.Component {
+  isActive(path, location) {
+    return withPrefix(path) === withPrefix(location.pathname);
+  }
+
   render() {
-    const { data, location, children } = this.props;
+    const { data, children } = this.props;
+    const location = {
+      ...this.props.location,
+      pathname: withPrefix(this.props.location.pathname),
+    };
     return (
       <div>
         <Navbar fixedTop inverse collapseOnSelect>
@@ -49,24 +69,25 @@ class Layout extends React.Component {
             <Navbar.Toggle />
           </Navbar.Header>
           <Navbar.Collapse>
-            <Nav pullRight>
+            <Nav pullLeft>
               {data.site.siteMetadata.componentPages.map(
                 ({ path, displayName }) => (
-                  <NavItem
-                    key={path}
-                    active={path === location.pathname}
-                    to={path}
-                  >
+                  <NavItem key={path} to={path} location={location}>
                     {displayName}
                   </NavItem>
                 )
               )}
             </Nav>
+            <Nav pullRight>
+              <NavItem to="/with-react-router" location={location}>
+                With React Router
+              </NavItem>
+            </Nav>
           </Navbar.Collapse>
         </Navbar>
-        <Grid style={{ paddingTop: '4rem', paddingBottom: '1rem' }}>
+        <div style={{ paddingTop: '4rem', paddingBottom: '1.5rem' }}>
           {children}
-        </Grid>
+        </div>
       </div>
     );
   }
@@ -82,6 +103,7 @@ export const exposedComponentsFragment = graphql`
       componentPages {
         path
         displayName
+        codeSandboxId
       }
     }
   }

www/src/pages/index.js

@@ -1,7 +1,7 @@
 import { graphql, Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
-
+import { Grid } from 'react-bootstrap';
 import Layout from '../components/Layout';
 
 const propTypes = {
@@ -26,53 +26,59 @@ class Index extends React.Component {
 
     return (
       <Layout data={data} location={location}>
-        <h1>React Transition Group</h1>
-        <blockquote>
-          <p>
-            Exposes simple components useful for defining entering and exiting
-            transitions. React Transition Group is not an animation library like{' '}
-            <a href="https://github.com/chenglou/react-motion">React-Motion</a>,
-            it does not animate styles by itself. Instead it exposes transition
-            stages, manages classes and group elements and manipulates the DOM
-            in useful ways, making the implementation of actual visual
-            transitions much easier.
-          </p>
-        </blockquote>
-        <section>
-          <h2>Getting Started</h2>
-          <p />
-          <h3 className="h4">Installation</h3>
-          <pre className="language-bash">
-            <code>
-              {`# npm
+        <Grid>
+          <h1>React Transition Group</h1>
+          <blockquote>
+            <p>
+              Exposes simple components useful for defining entering and exiting
+              transitions. React Transition Group is not an animation library
+              like{' '}
+              <a href="https://github.com/chenglou/react-motion">
+                React-Motion
+              </a>, it does not animate styles by itself. Instead it exposes
+              transition stages, manages classes and group elements and
+              manipulates the DOM in useful ways, making the implementation of
+              actual visual transitions much easier.
+            </p>
+          </blockquote>
+          <section>
+            <h2>Getting Started</h2>
+            <p />
+            <h3 className="h4">Installation</h3>
+            <pre className="language-bash">
+              <code>
+                {`
+# npm
 npm install react-transition-group --save
 
 # yarn
-yarn add react-transition-group`}
-            </code>
-          </pre>
+yarn add react-transition-group
+              `.trim()}
+              </code>
+            </pre>
 
-          <h3 className="h4">CDN / External</h3>
-          <p>
-            Since react-transition-group is fairly small, the overhead of
-            including the library in your application is negligible. However, in
-            situations where it may be useful to benefit from an external CDN
-            when bundling, link to the following CDN:{' '}
-            <a href="https://unpkg.com/react-transition-group/dist/react-transition-group.min.js">
-              https://unpkg.com/react-transition-group/dist/react-transition-group.min.js
-            </a>
-          </p>
-        </section>
-        <h2>Components</h2>
-        <ul>
-          {data.site.siteMetadata.componentPages.map(
-            ({ path, displayName }) => (
-              <li key={path}>
-                <Link to={path}>{displayName}</Link>
-              </li>
-            )
-          )}
-        </ul>
+            <h3 className="h4">CDN / External</h3>
+            <p>
+              Since react-transition-group is fairly small, the overhead of
+              including the library in your application is negligible. However,
+              in situations where it may be useful to benefit from an external
+              CDN when bundling, link to the following CDN:{' '}
+              <a href="https://unpkg.com/react-transition-group/dist/react-transition-group.min.js">
+                https://unpkg.com/react-transition-group/dist/react-transition-group.min.js
+              </a>
+            </p>
+          </section>
+          <h2>Components</h2>
+          <ul>
+            {data.site.siteMetadata.componentPages.map(
+              ({ path, displayName }) => (
+                <li key={path}>
+                  <Link to={path}>{displayName}</Link>
+                </li>
+              )
+            )}
+          </ul>
+        </Grid>
       </Layout>
     );
   }