-
Notifications
You must be signed in to change notification settings - Fork 652
/
index.js
86 lines (78 loc) · 2.5 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import PropTypes from 'prop-types';
import React from 'react';
import Link from 'gatsby-link';
const propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
componentPages: PropTypes.arrayOf(
PropTypes.shape({
path: PropTypes.string.isRequired,
displayName: PropTypes.string.isRequired,
})
).isRequired,
}).isRequired,
}).isRequired,
}).isRequired,
};
class Index extends React.Component {
render() {
const { data } = this.props;
return (
<div>
<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>
<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>
</div>
);
}
}
Index.propTypes = propTypes;
export default Index;
export const pageQuery = graphql`
query Home {
...ComponentPages
}
`;