1.0.18 • Published 4 months ago
tilt-hook v1.0.18
tilt-hook
A simple React hook that creates a tilting card effect.
export default function CardWrapper() {
const wrapperElement = useRef()
const cardElement = useRef()
const setDistance = useTilt(wrapperElement, cardElement, { degree: 30 })
return (
<div ref={wrapperElement}>
<div ref={cardElement}>
<img style={setDistance(30)}/>
</div>
</div>)
}
useTilt
The default export, the useTilt
function, takes 2-3 parameters:
useTilt(wrapper: RefObject, target: RefObjeect, options?: TiltOptions)
.
Returns setDistance
function, which can be used to easily set the distance, or z-depth, of an element.
TiltOptions
degree: number
- The maximum degree that a card can turn.
perspective: number
- The perspective used for the 3D effect.
inverted: boolean
- Whether the card should tilt to be closer to the mouse instead, on hover.
1.0.18
4 months ago
1.0.17
4 months ago
1.0.16
4 months ago
1.0.15
4 months ago
1.0.14
4 months ago
1.0.13
4 months ago
1.0.12
4 months ago
1.0.11
4 months ago
1.0.10
4 months ago
1.0.9
4 months ago
1.0.8
4 months ago
1.0.7
4 months ago
1.0.6
4 months ago
1.0.4
4 months ago
1.0.3
4 months ago
1.0.2
4 months ago
1.0.1
4 months ago
1.0.0
4 months ago