Skip to content
Player

Auto Scroll Manager Plugin

The Auto Scroll Plugin helps orchestrate scrolling to components based off of 3 scenarios:

  • On page load
  • On validation trigger
  • On first appearance after page load

Usage

Pull in the plugin and attach it to a player instance:

import { ReactPlayer } from "@player-ui/react";
import { AutoScrollManagerPlugin } from "@player-ui/auto-scroll-manager-plugin-react";


const reactPlayer = new ReactPlayer({
  plugins: [new AutoScrollManagerPlugin()],
});

Next you’ll use the provided useRegisterAsScrollable hook to register a component as a scrollable target in a useLayoutEffect or similar hook.

import {
  useRegisterAsScrollable,
  ScrollType,
} from "@player-ui/auto-scroll-manager-plugin-react";


const CustomScrollableAsset = (props: CustomAssetType) => {
  const registerFunction = useRegisterAsScrollable();


  useLayoutEffect(() => {
    registerFunction({
      type: ScrollType.FirstAppearance,
      ref: props.id,
    });
  }, []);


  return <SomeComponent />;
};