window is not defined

[Tatametheus]

The following codes given the error window is not defined in the terminal console. How can I get the window and set it to domTarget?

function ScrollExample() {
  const [{ width }, set] = useSpring(() => ({ width: '0%' }))
  const height = document.documentElement.scrollHeight

  const bind = useScroll(
    ({ xy: [, y] }) => set({ width: (y / height) * 100 + '%' }),
    { domTarget: window }
  )

  React.useEffect(bind, [bind])

  return <animated.div style={{ width }} />
}

[jamesmosier]

You'll have to wait for the client to render this, as window is not available on the server or when this page is built.

You could conditionally load this component by checking if typeof window !== 'undefined' then render the component.

Otherwise you could try:

 const bind = useScroll(
    ({ xy: [, y] }) => set({ width: (y / height) * 100 + '%' }),
    { domTarget: typeof window !== 'undefined ? window : null }
  )

As a last resort you could import this ScrollExample component using a dynamic import with srr: false as shown in the docs

[Tatametheus]

Thanks. this fixed the error, but scroll doesn't not applied to the page.

import React from 'react';
import { useScroll } from 'react-use-gesture';
import { useSpring, animated } from 'react-spring';
import { Box } from 'grommet';

const Test: React.FC = () => {
    const [{ width }, set] = useSpring(() => ({ width: '0%' }));
    const height = document.documentElement.scrollHeight;
    console.log(height);
    console.log(width);

    const bind = useScroll(state => set({ width: (state.xy[1] / height) * 100 + '%' }), { domTarget: window });

    React.useEffect(bind, [bind]);

    return (
        <Box height="300vh">
            <animated.div style={{ width }} />
        </Box>
    );
};

export default Test;

consoles only work on the first render.

import React, { FC } from 'react';
import { Box } from 'grommet';
import dynamic from 'next/dynamic';

const DynamicComponentWithNoSSR = dynamic(() => import('../components/test'), { ssr: false });

const Example: FC = () => {
    return (
        <Box>
            <DynamicComponentWithNoSSR />
        </Box>
    );
};

export default Example;