add examples #16

.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

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 (
+    <ul className={isOnScreen ? "some-effects" : "regular-list"}>
+      {children}
+      <li ref={ref} className="hidden-dummy" aria-hidden />
+    </ul>
+  );
+};
+
+export default List;

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<HTMLVideoElement>(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 <video ref={ref} src={src} autoPlay loop />;
+};

package.json

@@ -1,11 +1,14 @@
 {
   "name": "@ukorvl/react-on-screen",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Lightweight typescript library to detect React elements visibility",
   "license": "MIT",
   "author": "ukorvl",
   "repository": "https://github.com/ukorvl/react-on-screen",
   "homepage": "https://github.com/ukorvl/react-on-screen#readme",
+  "bugs": {
+    "url": "https://github.com/ukorvl/react-on-screen/issues"
+  },
   "main": "build/react-on-screen.cjs.js",
   "module": "build/react-on-screen.esm.js",
   "unpkg": "build/react-on-screen.standalone.js",
@@ -16,6 +19,7 @@
   "scripts": {
     "prebuild": "rimraf build",
     "build": "rollup -c",
+    "build:example": "rollup -c rollup.config.example.js",
     "test": "jest",
     "lint": "biome lint ./lib",
     "format": "biome format --write ./lib",
@@ -62,10 +66,11 @@
     "typescript": "4.7"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "lint-staged": {
-    "*.{js,ts,tsx}": "biome format --write"
+    "*.{js,ts,tsx}": "npm run format"
   },
   "jest": {
     "roots": [

rollup.config.js

@@ -1,11 +1,11 @@
-const nodeResolve = require('@rollup/plugin-node-resolve').nodeResolve;
-const commonjs = require('@rollup/plugin-commonjs').default;
-const replace = require('@rollup/plugin-replace');
-const esbuild = require('rollup-plugin-esbuild').default;
-const dts = require('rollup-plugin-dts').default;
-const filesize = require('rollup-plugin-filesize');
+const nodeResolve = require("@rollup/plugin-node-resolve").nodeResolve;
+const commonjs = require("@rollup/plugin-commonjs").default;
+const replace = require("@rollup/plugin-replace");
+const esbuild = require("rollup-plugin-esbuild").default;
+const dts = require("rollup-plugin-dts").default;
+const filesize = require("rollup-plugin-filesize");
 
-const packageJson = require('./package.json');
+const packageJson = require("./package.json");
 
 /** Create banner */
 const createBanner = (version) => {
@@ -23,13 +23,13 @@ const createBanner = (version) => {
 
 /** Get config to generate js */
 const getConfig = ({ outputFile, format, isStandalone = false }) => ({
-  input: 'lib/index.ts',
+  input: "lib/index.ts",
   output: {
     file: outputFile,
     format,
     sourcemap: true,
-    globals: isStandalone ? { react: 'React' } : undefined,
-    name: isStandalone ? 'ReactOnScreen' : undefined,
+    globals: isStandalone ? { react: "React" } : undefined,
+    name: isStandalone ? "ReactOnScreen" : undefined,
     banner: createBanner(packageJson.version),
   },
   plugins: [
@@ -43,32 +43,53 @@ const getConfig = ({ outputFile, format, isStandalone = false }) => ({
     isStandalone
       ? replace({
           preventAssignment: true,
-          values: { 'process.env.NODE_ENV': JSON.stringify('production') },
+          values: { "process.env.NODE_ENV": JSON.stringify("production") },
         })
       : [],
   ),
-  external: ['react', 'react-dom'].concat(isStandalone ? [] : ['hoist-non-react-statics']),
+  external: ["react", "react-dom"].concat(isStandalone ? [] : ["hoist-non-react-statics"]),
 });
 
 /** Generate typings config */
 const dtsConfig = {
-  input: 'lib/index.ts',
-  output: [{ file: packageJson.types, format: 'es' }],
+  input: "lib/index.ts",
+  output: [{ file: packageJson.types, format: "es" }],
   plugins: [dts()],
 };
 
+/** Config to build example App */
+const exampleConfig = {
+  input: "example/index.tsx",
+  output: {
+    file: "example/dist/index.js",
+    format: "iife",
+    sourcemap: true,
+    globals: { react: "React", "react-dom": "ReactDOM" },
+    name: "ReactOnScreenExample",
+  },
+  plugins: [
+    nodeResolve(),
+    commonjs(),
+    esbuild({
+      minify: true,
+    }),
+    filesize(),
+  ],
+  external: ["react", "react-dom"],
+};
+
 const configs = [
   getConfig({
     outputFile: packageJson.main,
-    format: 'cjs',
+    format: "cjs",
   }),
   getConfig({
     outputFile: packageJson.module,
-    format: 'esm',
+    format: "esm",
   }),
   getConfig({
     outputFile: packageJson.unpkg,
-    format: 'iife',
+    format: "iife",
     isStandalone: true,
   }),
   dtsConfig,