Skip to content

Commit c3b7708

Browse files
silvenonsilvenon
authored
Merge pull request #378 from silvenon/docs
Add instructions for usage with React Router
2 parents 6594989 + 795592f commit c3b7708

File tree

11 files changed

+299
-106
lines changed

11 files changed

+299
-106
lines changed

‎src/CSSTransition.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,6 @@ const propTypes = {
121121
* When the `in` prop is toggled to `true` the Component will get
122122
* the `example-enter` CSS class and the `example-enter-active` CSS class
123123
* added in the next tick. This is a convention based on the `classNames` prop.
124-
*
125-
* ## Example
126-
*
127-
* <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>
128124
*/
129125
class CSSTransition extends React.Component {
130126
onEnter = (node, appearing) => {

‎src/Transition.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,6 @@ export const EXITING = 'exiting'
105105
* > (read [this issue](https://github.com/reactjs/react-transition-group/issues/159#issuecomment-322761171)
106106
* > for more info). Take this into account when choosing between `Transition` and
107107
* > `CSSTransition`.
108-
*
109-
* ## Example
110-
*
111-
* <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>
112-
*
113108
*/
114109
class Transition extends React.Component {
115110
static contextTypes = {

‎src/TransitionGroup.js

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -66,24 +66,18 @@ const defaultProps = {
6666
}
6767

6868
/**
69-
* The `<TransitionGroup>` component manages a set of `<Transition>` components
70-
* in a list. Like with the `<Transition>` component, `<TransitionGroup>`, is a
71-
* state machine for managing the mounting and unmounting of components over
72-
* time.
69+
* The `<TransitionGroup>` component manages a set of transition components
70+
* (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
71+
* components, `<TransitionGroup>` is a state machine for managing the mounting
72+
* and unmounting of components over time.
7373
*
74-
* Consider the example below using the `Fade` CSS transition from before.
75-
* As items are removed or added to the TodoList the `in` prop is toggled
76-
* automatically by the `<TransitionGroup>`. You can use _any_ `<Transition>`
77-
* component in a `<TransitionGroup>`, not just css.
78-
*
79-
* ## Example
80-
*
81-
* <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>
74+
* Consider the example below. As items are removed or added to the TodoList the
75+
* `in` prop is toggled automatically by the `<TransitionGroup>`.
8276
*
8377
* Note that `<TransitionGroup>` does not define any animation behavior!
84-
* Exactly _how_ a list item animates is up to the individual `<Transition>`
85-
* components. This means you can mix and match animations across different
86-
* list items.
78+
* Exactly _how_ a list item animates is up to the individual transition
79+
* component. This means you can mix and match animations across different list
80+
* items.
8781
*/
8882
class TransitionGroup extends React.Component {
8983
static childContextTypes = {

‎www/gatsby-config.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,21 @@ module.exports = {
66
title: 'React Transition Group Documentation',
77
author: 'Jason Quense',
88
componentPages: [
9-
{ path: '/transition', displayName: 'Transition' },
10-
{ path: '/css-transition', displayName: 'CSSTransition' },
11-
{ path: '/transition-group', displayName: 'TransitionGroup' },
9+
{
10+
path: '/transition',
11+
displayName: 'Transition',
12+
codeSandboxId: '741op4mmj0',
13+
},
14+
{
15+
path: '/css-transition',
16+
displayName: 'CSSTransition',
17+
codeSandboxId: 'm77l2vp00x',
18+
},
19+
{
20+
path: '/transition-group',
21+
displayName: 'TransitionGroup',
22+
codeSandboxId: '00rqyo26kn',
23+
},
1224
],
1325
},
1426
plugins: [

‎www/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
"gatsby-transformer-react-docgen": "^2.1.1-beta.3",
2121
"gatsby-transformer-remark": "^1.0.0",
2222
"lodash": "^4.17.4",
23-
"react-bootstrap": "^0.32.1"
23+
"react": "^16.4.1",
24+
"react-bootstrap": "^0.32.1",
25+
"react-dom": "^16.4.1"
2426
},
2527
"devDependencies": {
2628
"gh-pages": "^1.0.0",

‎www/src/components/Example.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Grid } from 'react-bootstrap';
4+
5+
const propTypes = {
6+
codeSandbox: PropTypes.shape({
7+
title: PropTypes.string.isRequired,
8+
id: PropTypes.string.isRequired,
9+
}).isRequired,
10+
};
11+
12+
const Example = ({ codeSandbox }) => (
13+
<div>
14+
<Grid>
15+
<h2>Example</h2>
16+
</Grid>
17+
<div
18+
dangerouslySetInnerHTML={{
19+
__html: `
20+
<iframe
21+
title="${codeSandbox.title}"
22+
src="https://codesandbox.io/embed/${codeSandbox.id}?fontsize=14"
23+
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
24+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
25+
/>`,
26+
}}
27+
/>
28+
</div>
29+
);
30+
31+
Example.propTypes = propTypes;
32+
33+
export default Example;

‎www/src/components/Layout.js

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { graphql, Link } from 'gatsby';
1+
import { graphql, Link, withPrefix } from 'gatsby';
22
import PropTypes from 'prop-types';
33
import React from 'react';
44

5-
import { Grid, Navbar, Nav } from 'react-bootstrap';
5+
import { Navbar, Nav } from 'react-bootstrap';
66

77
import '../css/bootstrap.scss';
88
import '../css/prism-theme.scss';
@@ -20,25 +20,45 @@ const propTypes = {
2020
}).isRequired,
2121
}).isRequired,
2222
}).isRequired,
23-
location: PropTypes.object.isRequired,
23+
location: PropTypes.shape({
24+
pathname: PropTypes.string.isRequired,
25+
}).isRequired,
2426
};
2527

26-
const NavItem = ({ active, to, children }) => (
27-
<li role="presentation" className={active ? 'active' : null}>
28-
<Link aria-selected={active} to={to}>
28+
const NavItem = ({ to, location, children }) => (
29+
<li role="presentation">
30+
<Link
31+
to={to}
32+
location={location}
33+
activeStyle={{
34+
color: '#fff',
35+
backgroundColor: '#080808',
36+
}}
37+
>
2938
{children}
3039
</Link>
3140
</li>
3241
);
3342

3443
NavItem.propTypes = {
35-
active: PropTypes.bool,
3644
to: PropTypes.string.isRequired,
45+
location: PropTypes.shape({
46+
pathname: PropTypes.string.isRequired,
47+
}).isRequired,
48+
children: PropTypes.node.isRequired,
3749
};
3850

3951
class Layout extends React.Component {
52+
isActive(path, location) {
53+
return withPrefix(path) === withPrefix(location.pathname);
54+
}
55+
4056
render() {
41-
const { data, location, children } = this.props;
57+
const { data, children } = this.props;
58+
const location = {
59+
...this.props.location,
60+
pathname: withPrefix(this.props.location.pathname),
61+
};
4262
return (
4363
<div>
4464
<Navbar fixedTop inverse collapseOnSelect>
@@ -49,24 +69,25 @@ class Layout extends React.Component {
4969
<Navbar.Toggle />
5070
</Navbar.Header>
5171
<Navbar.Collapse>
52-
<Nav pullRight>
72+
<Nav pullLeft>
5373
{data.site.siteMetadata.componentPages.map(
5474
({ path, displayName }) => (
55-
<NavItem
56-
key={path}
57-
active={path === location.pathname}
58-
to={path}
59-
>
75+
<NavItem key={path} to={path} location={location}>
6076
{displayName}
6177
</NavItem>
6278
)
6379
)}
6480
</Nav>
81+
<Nav pullRight>
82+
<NavItem to="/with-react-router" location={location}>
83+
With React Router
84+
</NavItem>
85+
</Nav>
6586
</Navbar.Collapse>
6687
</Navbar>
67-
<Grid style={{ paddingTop: '4rem', paddingBottom: '1rem' }}>
88+
<div style={{ paddingTop: '4rem', paddingBottom: '1.5rem' }}>
6889
{children}
69-
</Grid>
90+
</div>
7091
</div>
7192
);
7293
}
@@ -82,6 +103,7 @@ export const exposedComponentsFragment = graphql`
82103
componentPages {
83104
path
84105
displayName
106+
codeSandboxId
85107
}
86108
}
87109
}

‎www/src/pages/index.js

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { graphql, Link } from 'gatsby';
22
import PropTypes from 'prop-types';
33
import React from 'react';
4-
4+
import { Grid } from 'react-bootstrap';
55
import Layout from '../components/Layout';
66

77
const propTypes = {
@@ -26,53 +26,59 @@ class Index extends React.Component {
2626

2727
return (
2828
<Layout data={data} location={location}>
29-
<h1>React Transition Group</h1>
30-
<blockquote>
31-
<p>
32-
Exposes simple components useful for defining entering and exiting
33-
transitions. React Transition Group is not an animation library like{' '}
34-
<a href="https://github.com/chenglou/react-motion">React-Motion</a>,
35-
it does not animate styles by itself. Instead it exposes transition
36-
stages, manages classes and group elements and manipulates the DOM
37-
in useful ways, making the implementation of actual visual
38-
transitions much easier.
39-
</p>
40-
</blockquote>
41-
<section>
42-
<h2>Getting Started</h2>
43-
<p />
44-
<h3 className="h4">Installation</h3>
45-
<pre className="language-bash">
46-
<code>
47-
{`# npm
29+
<Grid>
30+
<h1>React Transition Group</h1>
31+
<blockquote>
32+
<p>
33+
Exposes simple components useful for defining entering and exiting
34+
transitions. React Transition Group is not an animation library
35+
like{' '}
36+
<a href="https://github.com/chenglou/react-motion">
37+
React-Motion
38+
</a>, it does not animate styles by itself. Instead it exposes
39+
transition stages, manages classes and group elements and
40+
manipulates the DOM in useful ways, making the implementation of
41+
actual visual transitions much easier.
42+
</p>
43+
</blockquote>
44+
<section>
45+
<h2>Getting Started</h2>
46+
<p />
47+
<h3 className="h4">Installation</h3>
48+
<pre className="language-bash">
49+
<code>
50+
{`
51+
# npm
4852
npm install react-transition-group --save
4953
5054
# yarn
51-
yarn add react-transition-group`}
52-
</code>
53-
</pre>
55+
yarn add react-transition-group
56+
`.trim()}
57+
</code>
58+
</pre>
5459

55-
<h3 className="h4">CDN / External</h3>
56-
<p>
57-
Since react-transition-group is fairly small, the overhead of
58-
including the library in your application is negligible. However, in
59-
situations where it may be useful to benefit from an external CDN
60-
when bundling, link to the following CDN:{' '}
61-
<a href="https://unpkg.com/react-transition-group/dist/react-transition-group.min.js">
62-
https://unpkg.com/react-transition-group/dist/react-transition-group.min.js
63-
</a>
64-
</p>
65-
</section>
66-
<h2>Components</h2>
67-
<ul>
68-
{data.site.siteMetadata.componentPages.map(
69-
({ path, displayName }) => (
70-
<li key={path}>
71-
<Link to={path}>{displayName}</Link>
72-
</li>
73-
)
74-
)}
75-
</ul>
60+
<h3 className="h4">CDN / External</h3>
61+
<p>
62+
Since react-transition-group is fairly small, the overhead of
63+
including the library in your application is negligible. However,
64+
in situations where it may be useful to benefit from an external
65+
CDN when bundling, link to the following CDN:{' '}
66+
<a href="https://unpkg.com/react-transition-group/dist/react-transition-group.min.js">
67+
https://unpkg.com/react-transition-group/dist/react-transition-group.min.js
68+
</a>
69+
</p>
70+
</section>
71+
<h2>Components</h2>
72+
<ul>
73+
{data.site.siteMetadata.componentPages.map(
74+
({ path, displayName }) => (
75+
<li key={path}>
76+
<Link to={path}>{displayName}</Link>
77+
</li>
78+
)
79+
)}
80+
</ul>
81+
</Grid>
7682
</Layout>
7783
);
7884
}

0 commit comments

Comments
 (0)