import react from 'react'; import ScrollInfoProvider from '@faceless-ui/scroll-info; export const MyApp = () = ( <ScrollInfoProvider> ... </ScrollInfoProvider> );
children*
React children.
x
Current scroll position along the x-axis
y
Current scroll position along the y-axis
xDifference
Last number of pixels scrolled along the x-axis
yDifference
Last number of pixels scrolled along the y-axis
xPercentage
Percentage scrolled along the x-axis
yPercentage
Percentage scrolled along the y-axis
totalPercentage
Percentage scrolled along the both and x and y-axes
eventsFired
Number of animation frames completed
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 ( ... ) };
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 ( ... ) };
All types can be directly imported.
import { ScrollInfoProviderProps, ScrollInfoProps, IScrollInfoContext } from '@faceless-ui/scroll-info/dist/types';