Skip to content

Commit 5369ebe

Browse files
bvaughnbvaughn
committed
Embed animated examples in Markdown
1 parent aedbd8f commit 5369ebe

12 files changed

+461
-139
lines changed

‎content/docs/addons-animation.md

+6-133
Original file line numberDiff line numberDiff line change
@@ -27,48 +27,7 @@ import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
2727
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm
2828
```
2929

30-
```javascript{31-36}
31-
class TodoList extends React.Component {
32-
constructor(props) {
33-
super(props);
34-
this.state = {items: ['hello', 'world', 'click', 'me']};
35-
this.handleAdd = this.handleAdd.bind(this);
36-
}
37-
38-
handleAdd() {
39-
const newItems = this.state.items.concat([
40-
prompt('Enter some text')
41-
]);
42-
this.setState({items: newItems});
43-
}
44-
45-
handleRemove(i) {
46-
let newItems = this.state.items.slice();
47-
newItems.splice(i, 1);
48-
this.setState({items: newItems});
49-
}
50-
51-
render() {
52-
const items = this.state.items.map((item, i) => (
53-
<div key={item} onClick={() => this.handleRemove(i)}>
54-
{item}
55-
</div>
56-
));
57-
58-
return (
59-
<div>
60-
<button onClick={this.handleAdd}>Add Item</button>
61-
<ReactCSSTransitionGroup
62-
transitionName="example"
63-
transitionEnterTimeout={500}
64-
transitionLeaveTimeout={300}>
65-
{items}
66-
</ReactCSSTransitionGroup>
67-
</div>
68-
);
69-
}
70-
}
71-
```
30+
`embed:animation/react-transition-group.js`
7231

7332
> Note:
7433
>
@@ -78,46 +37,15 @@ In this component, when a new item is added to `ReactCSSTransitionGroup` it will
7837

7938
You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:
8039

81-
```css
82-
.example-enter {
83-
opacity: 0.01;
84-
}
85-
86-
.example-enter.example-enter-active {
87-
opacity: 1;
88-
transition: opacity 500ms ease-in;
89-
}
90-
91-
.example-leave {
92-
opacity: 1;
93-
}
94-
95-
.example-leave.example-leave-active {
96-
opacity: 0.01;
97-
transition: opacity 300ms ease-in;
98-
}
99-
```
40+
`embed:animation/animation.css`
10041

10142
You'll notice that animation durations need to be specified in both the CSS and the render method; this tells React when to remove the animation classes from the element and -- if it's leaving -- when to remove the element from the DOM.
10243

10344
### Animate Initial Mounting
10445

10546
`ReactCSSTransitionGroup` provides the optional prop `transitionAppear`, to add an extra transition phase at the initial mount of the component. There is generally no transition phase at the initial mount as the default value of `transitionAppear` is `false`. The following is an example which passes the prop `transitionAppear` with the value `true`.
10647

107-
```javascript{5-6}
108-
render() {
109-
return (
110-
<ReactCSSTransitionGroup
111-
transitionName="example"
112-
transitionAppear={true}
113-
transitionAppearTimeout={500}
114-
transitionEnter={false}
115-
transitionLeave={false}>
116-
<h1>Fading at Initial Mount</h1>
117-
</ReactCSSTransitionGroup>
118-
);
119-
}
120-
```
48+
`embed:animation/initial-mounting.js`
12149

12250
During the initial mount `ReactCSSTransitionGroup` will get the `example-appear` CSS class and the `example-appear-active` CSS class added in the next tick.
12351

@@ -144,76 +72,21 @@ At the initial mount, all children of the `ReactCSSTransitionGroup` will `appear
14472

14573
It is also possible to use custom class names for each of the steps in your transitions. Instead of passing a string into transitionName you can pass an object containing either the `enter` and `leave` class names, or an object containing the `enter`, `enter-active`, `leave-active`, and `leave` class names. If only the enter and leave classes are provided, the enter-active and leave-active classes will be determined by appending '-active' to the end of the class name. Here are two examples using custom classes:
14674

147-
```javascript
148-
// ...
149-
<ReactCSSTransitionGroup
150-
transitionName={ {
151-
enter: 'enter',
152-
enterActive: 'enterActive',
153-
leave: 'leave',
154-
leaveActive: 'leaveActive',
155-
appear: 'appear',
156-
appearActive: 'appearActive'
157-
} }>
158-
{item}
159-
</ReactCSSTransitionGroup>
160-
161-
<ReactCSSTransitionGroup
162-
transitionName={ {
163-
enter: 'enter',
164-
leave: 'leave',
165-
appear: 'appear'
166-
} }>
167-
{item2}
168-
</ReactCSSTransitionGroup>
169-
// ...
170-
```
75+
`embed:animation/custom-classes.js`
17176

17277
### Animation Group Must Be Mounted To Work
17378

17479
In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM or the prop `transitionAppear` must be set to `true`.
17580

17681
The example below would **not** work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Getting Started](#getting-started) section above to see the difference.
17782

178-
```javascript{4,6,13}
179-
render() {
180-
const items = this.state.items.map((item, i) => (
181-
<div key={item} onClick={() => this.handleRemove(i)}>
182-
<ReactCSSTransitionGroup transitionName="example">
183-
{item}
184-
</ReactCSSTransitionGroup>
185-
</div>
186-
));
187-
188-
return (
189-
<div>
190-
<button onClick={this.handleAdd}>Add Item</button>
191-
{items}
192-
</div>
193-
);
194-
}
195-
```
83+
`embed:animation/invalid-unmounted-example.js`
19684

19785
### Animating One or Zero Items
19886

19987
In the example above, we rendered a list of items into `ReactCSSTransitionGroup`. However, the children of `ReactCSSTransitionGroup` can also be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element. For example, we can implement a simple image carousel like this:
20088

201-
```javascript{10}
202-
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
203-
204-
function ImageCarousel(props) {
205-
return (
206-
<div>
207-
<ReactCSSTransitionGroup
208-
transitionName="carousel"
209-
transitionEnterTimeout={300}
210-
transitionLeaveTimeout={300}>
211-
<img src={props.imageSrc} key={props.imageSrc} />
212-
</ReactCSSTransitionGroup>
213-
</div>
214-
);
215-
}
216-
```
89+
`embed:animation/image-carousel.js`
21790

21891
### Disabling Animations
21992

‎content/docs/hello-world.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,7 @@ The easiest way to get started with React is to use [this Hello World example co
1616

1717
The smallest React example looks like this:
1818

19-
```js
20-
ReactDOM.render(
21-
<h1>Hello, world!</h1>,
22-
document.getElementById('root')
23-
);
24-
```
19+
```embed:hello-world.js```
2520

2621
It renders a header saying "Hello, world!" on the page.
2722

‎examples/animation/animation.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.example-enter {
2+
opacity: 0.01;
3+
}
4+
5+
.example-enter.example-enter-active {
6+
opacity: 1;
7+
transition: opacity 500ms ease-in;
8+
}
9+
10+
.example-leave {
11+
opacity: 1;
12+
}
13+
14+
.example-leave.example-leave-active {
15+
opacity: 0.01;
16+
transition: opacity 300ms ease-in;
17+
}

‎examples/animation/custom-classes.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div>
2+
<ReactCSSTransitionGroup
3+
transitionName={{
4+
enter: 'enter',
5+
enterActive: 'enterActive',
6+
leave: 'leave',
7+
leaveActive: 'leaveActive',
8+
appear: 'appear',
9+
appearActive: 'appearActive',
10+
}}>
11+
{item}
12+
</ReactCSSTransitionGroup>
13+
<ReactCSSTransitionGroup
14+
transitionName={{
15+
enter: 'enter',
16+
leave: 'leave',
17+
appear: 'appear',
18+
}}>
19+
{item2}
20+
</ReactCSSTransitionGroup>
21+
</div>;

‎examples/animation/image-carousel.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
2+
3+
function ImageCarousel(props) {
4+
return (
5+
<div>
6+
<ReactCSSTransitionGroup
7+
transitionName="carousel"
8+
transitionEnterTimeout={300}
9+
transitionLeaveTimeout={300}>
10+
{/* highlight-range{1-4} */}
11+
<img
12+
src={props.imageSrc}
13+
key={props.imageSrc}
14+
/>
15+
</ReactCSSTransitionGroup>
16+
</div>
17+
);
18+
}

‎examples/animation/initial-mounting.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
class MyComponent extends Component {
2+
render() {
3+
return (
4+
// highlight-range{3,4}
5+
<ReactCSSTransitionGroup
6+
transitionName="example"
7+
transitionAppear={true}
8+
transitionAppearTimeout={500}
9+
transitionEnter={false}
10+
transitionLeave={false}>
11+
<h1>Fading at Initial Mount</h1>
12+
</ReactCSSTransitionGroup>
13+
);
14+
}
15+
}

‎examples/animation/invalid-unmounted-example.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
class MyComponent extends Component {
2+
render() {
3+
const items = this.state.items.map(
4+
(item, i) => (
5+
<div
6+
key={item}
7+
onClick={() =>
8+
this.handleRemove(i)}>
9+
{/* highlight-range{1,3} */}
10+
<ReactCSSTransitionGroup transitionName="example">
11+
{item}
12+
</ReactCSSTransitionGroup>
13+
</div>
14+
)
15+
);
16+
17+
return (
18+
<div>
19+
<button
20+
onClick={this.handleAdd}>
21+
Add Item
22+
</button>
23+
{items /* highlight-line */}
24+
</div>
25+
);
26+
}
27+
}

‎examples/animation/react-transition-group.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
class TodoList extends React.Component {
2+
constructor(props) {
3+
super(props);
4+
this.state = {
5+
items: [
6+
'hello',
7+
'world',
8+
'click',
9+
'me',
10+
],
11+
};
12+
this.handleAdd = this.handleAdd.bind(
13+
this
14+
);
15+
}
16+
17+
handleAdd() {
18+
const newItems = this.state.items.concat(
19+
[prompt('Enter some text')]
20+
);
21+
this.setState({items: newItems});
22+
}
23+
24+
handleRemove(i) {
25+
let newItems = this.state.items.slice();
26+
newItems.splice(i, 1);
27+
this.setState({items: newItems});
28+
}
29+
30+
render() {
31+
const items = this.state.items.map(
32+
(item, i) => (
33+
<div
34+
key={item}
35+
onClick={() =>
36+
this.handleRemove(i)}>
37+
{item}
38+
</div>
39+
)
40+
);
41+
42+
return (
43+
<div>
44+
<button
45+
onClick={this.handleAdd}>
46+
Add Item
47+
</button>
48+
{/* highlight-range{1-6} */}
49+
<ReactCSSTransitionGroup
50+
transitionName="example"
51+
transitionEnterTimeout={500}
52+
transitionLeaveTimeout={300}>
53+
{items}
54+
</ReactCSSTransitionGroup>
55+
</div>
56+
);
57+
}
58+
}

‎gatsby-config.js

+8
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,18 @@ module.exports = {
5656
},
5757
},
5858
'gatsby-remark-autolink-headers',
59+
{
60+
resolve: 'gatsby-remark-embed-snippet',
61+
options: {
62+
classPrefix: 'gatsby-code-',
63+
directory: `${__dirname}/examples/`,
64+
},
65+
},
5966
{
6067
resolve: 'gatsby-remark-code-repls',
6168
options: {
6269
defaultText: 'Try it on CodePen',
70+
dependencies: ['react', 'react-dom'],
6371
directory: `${__dirname}/examples/`,
6472
externals: [
6573
`//unpkg.com/react/umd/react.development.js`,

0 commit comments

Comments
 (0)