forked from kentcdodds/beginners-guide-to-react
-
Notifications
You must be signed in to change notification settings - Fork 0
/
17-dom-refs.html
93 lines (89 loc) · 2.51 KB
/
17-dom-refs.html
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
87
88
89
90
91
92
93
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vanilla-tilt.min.js"></script>
<style>
/*
Taken from the vanilla-tilt.js demo site:
https://micku7zu.github.io/vanilla-tilt.js/index.html
*/
.tilt-root {
height: 150px;
background-color: red;
width: 200px;
background-image: -webkit-linear-gradient(
315deg,
#ff00ba 0%,
#fae713 100%
);
background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
transform-style: preserve-3d;
will-change: transform;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg)
scale3d(1, 1, 1);
}
.tilt-child {
position: absolute;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translateZ(30px) translateX(-50%) translateY(-50%);
box-shadow: 0 0 50px 0 rgba(51, 51, 51, 0.3);
background-color: white;
}
.totally-centered {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script type="text/babel">
function Tilt({children}) {
const tiltRef = React.useRef()
React.useEffect(() => {
const tiltNode = tiltRef.current
const vanillaTiltOptions = {
max: 25,
speed: 400,
glare: true,
'max-glare': 0.5,
}
VanillaTilt.init(tiltNode, vanillaTiltOptions)
return () => {
tiltNode.vanillaTilt.destroy()
}
}, [])
return (
<div ref={tiltRef} className="tilt-root">
<div className="tilt-child">{children}</div>
</div>
)
}
function App() {
const [showTilt, setShowTilt] = React.useState(true)
return (
<div>
<label>
<input
type="checkbox"
checked={showTilt}
onChange={e => setShowTilt(e.target.checked)}
/>{' '}
show tilt
</label>
{showTilt ? (
<Tilt>
<div className="totally-centered">vanilla-tilt.js</div>
</Tilt>
) : null}
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
</script>
</body>