useScroll

useScroll hook provides a simple way to simplify handling scrolling.

Import

import { useScroll } from "@prismane/core/hooks";

Usage

function Demo() {
  const {
    direction,
    position,
    scrollToTop,
    scrollToBottom,
    scrollToLeft,
    scrollToRight,
    scrollToPosition,
    scrollToId,
  } = useScroll();

  return (
    <Flex direction="column" gap={fr(2)}>
      <Flex gap={fr(2)} wrap="wrap">
        <Button onClick={() => scrollToTop()}>Scroll to Top</Button>
        <Button onClick={() => scrollToBottom()}>Scroll to Bottom</Button>
        <Button onClick={() => scrollToLeft()}>Scroll to Left</Button>
        <Button onClick={() => scrollToRight()}>Scroll to Right</Button>
        <Button onClick={() => scrollToPosition(20, 500)}>
          Scroll to Position
        </Button>
        <Button onClick={() => scrollToId("elementId")}>Scroll to ID</Button>
        <Text>Position: {JSON.stringify(position)}</Text>
        <Text>Direction: {direction}</Text>
      </Flex>
      <Flex id="elementId" my={fr(64)}>
        Element with ID
      </Flex>
    </Flex>
  );
}

API

Return Value

Name	Type	Description
`position`	`{x: number, y: number}`	The current scroll position.
`direction`	`'down' / 'up' / 'left' / 'right' / 'none'`	The direction of the current scroll.
`scrollToTop`	`() => void`	The function that scrolls to the top of the page.
`scrollToBottom`	`() => void`	The function that scrolls to the bottom of the page.
`scrollToLeft`	`() => void`	The function that scrolls to the left of the page.
`scrollToRight`	`() => void`	The function that scrolls to the right of the page.
`scrollToPosition`	`(x: number, y: number) => void`	The function that scrolls to a given position on the page.
`scrollToId`	`(elementId: stirng) => void`	The function that scrolls to a given element.

Go BackusePrevious

Up NextuseSearch