useIsoEffect

@coinbase/cds-web@8.13.6

A safe way of calling useLayoutEffect only on the client. Does nothing on the server.

Import

import { useIsoEffect } from '@coinbase/cds-web/hooks/useIsoEffect'

SourceView source code

---

Usage

Loading...

󰙡

Live Code

function Example() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useIsoEffect(() => {
    const updatePosition = (e: MouseEvent) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', updatePosition);

    // Cleanup function to remove event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []); // Empty deps array means this effect runs once on mount

  return (
    <VStack gap={2}>
      <TextHeadline>Mouse Position</TextHeadline>
      <Text>X: {position.x}</Text>
      <Text>Y: {position.y}</Text>
    </VStack>
  );
}