-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathBasicExample.js
40 lines (37 loc) · 1.14 KB
/
BasicExample.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
import { useState } from 'react';
import useTransition from 'react-transition-state';
function BasicExample() {
const [unmountOnExit, setUnmountOnExit] = useState(false);
const [state, toggle] = useTransition({
timeout: 750,
initialEntered: true,
preEnter: true,
unmountOnExit
});
return (
<div className="basic-example">
<h1>Basic example</h1>
<div className="basic-console">
<div className="basic-state">state: {state}</div>
<label>
Unmount after hiding
<input
type="checkbox"
checked={unmountOnExit}
onChange={(e) => setUnmountOnExit(e.target.checked)}
/>
</label>
<button className="btn" onClick={() => toggle()}>
{state === 'entering' || state === 'entered' ? 'Hide' : 'Show'}
</button>
</div>
{state !== 'unmounted' && (
<div className={`basic-transition ${state}`}>React transition state</div>
)}
<a className="code-sandbox" href="https://codesandbox.io/s/react-transition-basic-100io">
Edit on CodeSandbox
</a>
</div>
);
}
export default BasicExample;