useLink

Creates a reactive Link which allows for reactive animations based on the Link's value.

page.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
import { useLink } from '@infinityfx/lively/hooks';

export default function Page() {

    const link = useLink(0);

    return <Animatable animate={{ rotate: link(val => `${val}deg`) }}>
        <div
            onClick={() => {
                link.set(Math.random() * 360, .3);
            }}
            style={{
                width: 100,
                height: 100,
                borderRadius: 4,
                backgroundColor: 'var(--clr-accent)',
                cursor: 'pointer'
            }} />
    </Animatable>;
}

Call signature

1 
const link = useLink<T = any>(initial)

Parameters

initial: any

The initial value of the returned Link.

Returns

link Link<any>

A link which can be used inside the animate property to create an animation.