diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index fd31b64..1037b94 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -44,6 +44,8 @@ jobs: publish: runs-on: ubuntu-latest + permissions: + id-token: write needs: [build, ensure_version_changed] if: ${{ needs.ensure_version_changed.outputs.version }} name: Publish to npm diff --git a/examples/List.tsx b/examples/List.tsx new file mode 100644 index 0000000..8c6c9b2 --- /dev/null +++ b/examples/List.tsx @@ -0,0 +1,26 @@ +/** + * Simple workarounf to apply styles to a list + * when user scrolls to the bottom of the list. + */ + +import React from "react"; +import { useRef } from "react"; +import { useOnScreen } from "../lib/useOnScreen"; + +type ListProps = { + children: React.ReactNode; +}; + +export const List = ({ children }: ListProps) => { + const ref = useRef(null); + const { isOnScreen } = useOnScreen({ ref, margin: "100px" }); + + return ( + + ); +}; + +export default List; diff --git a/examples/Video.tsx b/examples/Video.tsx new file mode 100644 index 0000000..f1bdc28 --- /dev/null +++ b/examples/Video.tsx @@ -0,0 +1,37 @@ +/** + * Simple workaround to pause the video + * when the player is not on the screen + * and play it when it is. + * It is not supposed to be in your production code, only for demo purposes. + */ + +import React from "react"; +import { useRef } from "react"; +import { useOnScreen } from "../lib/useOnScreen"; + +type VideoProps = { + src: string; +}; + +export const Video = ({ src }: VideoProps) => { + const ref = useRef(null); + const { isOnScreen } = useOnScreen({ ref, threshold: 0.5 }); + + const stopVideo = React.useCallback(() => { + ref.current && ref.current.pause(); + }, [ref]); + + const playVideo = React.useCallback(() => { + ref.current && ref.current.play(); + }, [ref]); + + React.useEffect(() => { + if (isOnScreen) { + playVideo(); + } else { + stopVideo(); + } + }, [isOnScreen, stopVideo, playVideo]); + + return