#Scroll Info API

#<ScrollInfoProvider>

import react from 'react';
import ScrollInfoProvider from '@faceless-ui/scroll-info;

export const MyApp = () = (
  <ScrollInfoProvider>
    ...
  </ScrollInfoProvider>
);

#Props

React children.

#Context

Current scroll position along the x-axis

Current scroll position along the y-axis

Last number of pixels scrolled along the x-axis

Last number of pixels scrolled along the y-axis

Percentage scrolled along the x-axis

Percentage scrolled along the y-axis

Percentage scrolled along the both and x and y-axes

Number of animation frames completed

#useScrollInfo

This is a hook you can use to access the context.

import react from 'react';
import { useScrollInfo } from '@faceless-ui/scroll-info;

export const MyComponent = () => {
  const scrollInfo = useScrollInfo();
  return (
    ...
  )
};

#withScrollInfo

This is a higher-order component you can use to access the context.

import react from 'react';
import { withScrollInfo } from '@faceless-ui/scroll-info;

export const MyComponent = withScrollInfo((props) => {
  const { scrollInfo } = props;
  return (
    ...
  )
};

#TypeScript

All types can be directly imported.

import {
  ScrollInfoProviderProps,
  ScrollInfoProps,
  IScrollInfoContext
} from '@faceless-ui/scroll-info/dist/types';