- Wrap you app with ScreenCoverProvider;
- Get showCover function from context and run it.
<ScreenCoverProvider>
<App />
</ScreenCoverProvider>const { showCover } = useScreenCover()
const handleClick = () => showCover(goToPageTwo, onEnd)showCover receives onCover function (will be run once whole page is covered) and onEnd function (runs after animation is finished).
Use HOC withScreenCover which will pass showCover to props:
type Props = WithScreenCoverProps & OtherProps
class PageClass extends Component<Props> {...}
export default withScreenCover(PageClass)You can pass config to ScreenCoverProvider:
const screenCoverConfig = {
coverTime: 500,
uncoverTime: 4000,
backgroundColor: "red"
}
...
<ScreenCoverProvider config={screenCoverConfig}>
<App />
</ScreenCoverProvider>All config properties are optional. You can also pass config to showCover to overwrite global config for selected call:
const showGreenCover = () => showCover(goToPageThree, undefined, { backgroundColor: "aquamarine" })