Skip to content

Commit 10a9c2d

Browse files
authored
Migrate react transition group recipe to hooks (#658)
1 parent c885c8e commit 10a9c2d

File tree

1 file changed

+25
-33
lines changed

1 file changed

+25
-33
lines changed

docs/example-react-transition-group.md

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,29 @@ title: React Transition Group
66
## Mock
77

88
```jsx
9-
import React from 'react'
9+
import React, { useState } from 'react'
1010
import { CSSTransition } from 'react-transition-group'
1111
import { render, fireEvent } from '@testing-library/react'
1212

1313
function Fade({ children, ...props }) {
1414
return (
15-
<CSSTransition {...props} timeout={1000} className="fade">
15+
<CSSTransition {...props} timeout={1000} classNames="fade">
1616
{children}
1717
</CSSTransition>
1818
)
1919
}
2020

21-
class HiddenMessage extends React.Component {
22-
state = { show: this.props.initialShow || false }
23-
toggle = () => {
24-
this.setState(({ show }) => ({ show: !show }))
25-
}
26-
render() {
27-
return (
28-
<div>
29-
<button onClick={this.toggle}>Toggle</button>
30-
<Fade in={this.state.show}>
31-
<div>Hello world</div>
32-
</Fade>
33-
</div>
34-
)
35-
}
21+
function HiddenMessage({ initialShow }) {
22+
const [show, setShow] = useState(initialShow || false)
23+
const toggle = () => setShow(prevState => !prevState)
24+
return (
25+
<div>
26+
<button onClick={toggle}>Toggle</button>
27+
<Fade in={show}>
28+
<div>Hello world</div>
29+
</Fade>
30+
</div>
31+
)
3632
}
3733

3834
jest.mock('react-transition-group', () => {
@@ -66,27 +62,23 @@ import { render, fireEvent } from '@testing-library/react'
6662

6763
function Fade({ children, ...props }) {
6864
return (
69-
<CSSTransition {...props} timeout={1000} className="fade">
65+
<CSSTransition {...props} timeout={1000} classNames="fade">
7066
{children}
7167
</CSSTransition>
7268
)
7369
}
7470

75-
class HiddenMessage extends React.Component {
76-
state = { show: this.props.initialShow || false }
77-
toggle = () => {
78-
this.setState(({ show }) => ({ show: !show }))
79-
}
80-
render() {
81-
return (
82-
<div>
83-
<button onClick={this.toggle}>Toggle</button>
84-
<Fade in={this.state.show}>
85-
<div>Hello world</div>
86-
</Fade>
87-
</div>
88-
)
89-
}
71+
function HiddenMessage({ initialShow }) {
72+
const [show, setShow] = useState(initialShow || false)
73+
const toggle = () => setShow(prevState => !prevState)
74+
return (
75+
<div>
76+
<button onClick={toggle}>Toggle</button>
77+
<Fade in={show}>
78+
<div>Hello world</div>
79+
</Fade>
80+
</div>
81+
)
9082
}
9183

9284
jest.mock('react-transition-group', () => {

0 commit comments

Comments
 (0)