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 />;};