The Vanilla Tilt Exercise
- Transform the perspective of a container on enter with micku7zu/vanilla-tilt.js
- Display the details of the perspective transform as it happens
- Remember: We don't want event handlers dangling around on DOM nodes that are no longer in the document. (memory leak)
My Solution
Notes
DOM interactions
<div></div>
is just a syntactic sugar forReact.createElement()
, dom nodes are not created at all untilReactDom.render()
is called.- The
render
method has no access to the dom node by itself, it only creates and returns react elements - To access the dom, use a special prop called
ref
- A component that has rendered is said to be
mounted
. That's whenuseEffect
callback is called. By that pointref.current
is set to the dom node which you can directly do interactions, manipulations...
- ❗ ❗You CANNOT pass
ref
to a component as a prop the usual way that you might think - Ref forwarding is an opt-in feature that lets some components take a ref they receive, and pass it further down (in other words, “forward” it) to a child.
- ❗ ❗You CANNOT pass
Other interesting libraries that manipulate the dom
Further Reading