useCouple

A utility hook similar to useEffect that can be used to combine Links or peform an action when one of the Links changes.

page.tsx

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

export default function Page() {

    const scroll = useScroll();
    const x = useLink(0);

    const link = useCouple(() => {
        return [x(), scroll().y * 100];
    }, [scroll, x]);

    return <Animatable animate={{ translate: link(([x, y]) => `${x}% ${y}%`) }}>
        <div
            onClick={() => x.set(Math.random() * 100)}
            style={{
                width: 100,
                height: 100,
                borderRadius: 8,
                backgroundColor: 'var(--f-clr-primary-100)'
        }} />
    </Animatable>;
}

Call signature

1 
const link = useCouple<T>(callback, dependencies)

Parameters

callback: (() => T)[]

A callback function which gets called on mount or when any of the dependencies change (default React behaviour). In addition it will get called when any Link dependencies' value changes. The return value of this function will be the value of the Link returned by the useCouple hook. Note that callback does not need to return a value, in case you don't use the returned Link.

dependencies?: unknown[]

An array of React dependencies. In addition to the default React behaviour, any Links passed as a dependency will cause the callback to be called when any of their values change.
default = []

Returns

link Link<T>

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