{"id":41498839,"url":"https://github.com/farisnceit/react-idle-screensaver","last_synced_at":"2026-01-23T19:02:05.379Z","repository":{"id":334046883,"uuid":"1128768753","full_name":"farisnceit/react-idle-screensaver","owner":"farisnceit","description":"A lightweight React component and hook for detecting user inactivity and displaying a customizable idle screensaver. Ideal for kiosks, dashboards, TVs, and unattended React applications. Fully typed and compatible with React 18+","archived":false,"fork":false,"pushed_at":"2026-01-23T02:32:48.000Z","size":167,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-23T05:53:27.107Z","etag":null,"topics":["jsplugin","kiosks","kiosks-screensaver","react","react-screensaver","reactjs","reactplugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/farisnceit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-06T06:00:19.000Z","updated_at":"2026-01-22T18:56:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/farisnceit/react-idle-screensaver","commit_stats":null,"previous_names":["farisnceit/react-idle-screensaver"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/farisnceit/react-idle-screensaver","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Freact-idle-screensaver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Freact-idle-screensaver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Freact-idle-screensaver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Freact-idle-screensaver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/farisnceit","download_url":"https://codeload.github.com/farisnceit/react-idle-screensaver/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Freact-idle-screensaver/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28698343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T17:25:48.045Z","status":"ssl_error","status_checked_at":"2026-01-23T17:25:47.153Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsplugin","kiosks","kiosks-screensaver","react","react-screensaver","reactjs","reactplugin"],"created_at":"2026-01-23T19:02:03.672Z","updated_at":"2026-01-23T19:02:05.364Z","avatar_url":"https://github.com/farisnceit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @mohamedfariz/react-idle-screensaver\r\n\r\nA lightweight, TypeScript-first React library for detecting user inactivity and displaying customizable screensaver overlays.\r\n\r\nBuilt for **kiosks, dashboards, TVs, digital signage, and unattended React applications**.  \r\nCompatible with **React 18+** and designed to be **tree-shakable, SSR-safe, and bundler-friendly**.\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n- Idle / inactivity detection\r\n- Pluggable screensaver components\r\n- Built-in screensavers included\r\n- React 18+ compatible\r\n- TypeScript-first API with `.d.ts`\r\n- CSS-based styling (no inline styles)\r\n- Tree-shakable and Rollup-friendly\r\n- Safe for kiosk / long-running displays\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @mohamedfariz/react-idle-screensaver@beta\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add @mohamedfariz/react-idle-screensaver@beta\r\n```\r\n\r\nor\r\n\r\n```bash\r\npnpm add @mohamedfariz/react-idle-screensaver@beta\r\n```\r\n\r\nor\r\n\r\n```bash\r\nbun add @mohamedfariz/react-idle-screensaver@beta\r\n```\r\n\r\n## 🎨 Import CSS\r\n\r\n```tsx\r\nimport '@mohamedfariz/react-idle-screensaver/style.css';\r\n```\r\n\r\n## Basic Usage\r\n\r\n```tsx\r\nimport { ScreensaverManager, MatrixScreensaver } from '@mohamedfariz/react-idle-screensaver';\r\n\r\nfunction App() {\r\n    return (\r\n        \u003cScreensaverManager component={MatrixScreensaver} timeout={5000}\u003e\r\n            \u003cdiv style={{ height: '100vh' }}\u003e\r\n                \u003ch1\u003eMy Application\u003c/h1\u003e\r\n            \u003c/div\u003e\r\n        \u003c/ScreensaverManager\u003e\r\n    );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n## 🧩 Using a Custom Screensaver\r\n\r\nCreate your own custom screensaver component and pass it to the `ScreensaverManager`:\r\n\r\n```tsx\r\nimport { ScreensaverManager } from '@mohamedfariz/react-idle-screensaver';\r\n\r\nconst MyScreensaver = () =\u003e (\r\n    \u003cdiv\r\n        style={{\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            height: '100vh',\r\n            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',\r\n            color: 'white',\r\n            fontSize: '3rem',\r\n            fontWeight: 'bold',\r\n        }}\u003e\r\n        Custom Screensaver Content\r\n    \u003c/div\u003e\r\n);\r\n\r\nfunction App() {\r\n    return \u003cScreensaverManager component={MyScreensaver} timeout={10000} /\u003e;\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n### Passing Props to Custom Screensaver\r\n\r\nYou can pass custom props to your screensaver component:\r\n\r\n```tsx\r\ninterface CustomScreensaverProps {\r\n    message: string;\r\n    showLogo?: boolean;\r\n}\r\n\r\nconst MyScreensaver: React.FC\u003cCustomScreensaverProps\u003e = ({ message, showLogo }) =\u003e (\r\n    \u003cdiv className='custom-screensaver'\u003e\r\n        {showLogo \u0026\u0026 (\r\n            \u003csvg width='80' height='80' viewBox='0 0 80 80'\u003e\r\n                \u003crect width='80' height='80' fill='#667eea' rx='8' /\u003e\r\n            \u003c/svg\u003e\r\n        )}\r\n        \u003ch1\u003e{message}\u003c/h1\u003e\r\n    \u003c/div\u003e\r\n);\r\n\r\nfunction App() {\r\n    return (\r\n        \u003cScreensaverManager\r\n            component={MyScreensaver}\r\n            componentProps={{\r\n                message: 'Welcome to Our Kiosk',\r\n                showLogo: true,\r\n            }}\r\n            timeout={10000}\r\n        /\u003e\r\n    );\r\n}\r\n```\r\n\r\n### Using Screensaver Context\r\n\r\nAccess screensaver state and controls from within your custom component:\r\n\r\n```tsx\r\nimport { ScreensaverContext } from '@mohamedfariz/react-idle-screensaver';\r\nimport { useContext } from 'react';\r\n\r\nconst MyScreensaver = () =\u003e {\r\n    const { stopScreensaver } = useContext(ScreensaverContext);\r\n\r\n    return (\r\n        \u003cdiv onClick={stopScreensaver}\u003e\r\n            \u003ch1\u003eTap to Continue\u003c/h1\u003e\r\n        \u003c/div\u003e\r\n    );\r\n};\r\n```\r\n\r\n## 🛠 Built-in Screensavers\r\n\r\n| Component              | Description                                   |\r\n| ---------------------- | --------------------------------------------- |\r\n| BouncingScreensaver    | Floating badge that bounces around the screen |\r\n| MatrixScreensaver      | Matrix-style falling characters               |\r\n| ImageSliderScreensaver | Fullscreen image slideshow with clock         |\r\n| StarfieldScreensaver   | Animated starfield / space-warp effect        |\r\n\r\n## 📘 API Reference\r\n\r\n\u003cScreensaverManager /\u003e\r\nProp\tType\tDefault\tDescription\r\ncomponent\tComponentType\u003cT\u003e\t—\tScreensaver component\r\ncomponentProps\tT\t{}\tProps passed to screensaver\r\ntimeout\tnumber\t5000\tIdle timeout (ms)\r\nactive\tboolean\ttrue\tEnable / disable screensaver\r\nzIndex\tnumber\t50\tOverlay z-index\r\nonScreenSaverStop\t() =\u003e void\t—\tCallback when user resumes\r\n\r\n## 🔧 Hook: useIdleTimer\r\n\r\n```tsx\r\nimport { useIdleTimer } from \"@mohamedfariz/react-idle-screensaver\";\r\n\r\nconst isIdle = useIdleTimer(timeout?, active?);\r\n```\r\n\r\n## 🎯 Intended Use Cases\r\n\r\n- Kiosks and digital signage\r\n- Unattended applications\r\n- TV and dashboard interfaces\r\n- Long-running displays\r\n- Public or unattended terminals\r\n\r\n## ⚠️ Notes \u0026 Limitations\r\n\r\n- Browser-only (no Node rendering)\r\n- Consumers must import CSS explicitly\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarisnceit%2Freact-idle-screensaver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarisnceit%2Freact-idle-screensaver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarisnceit%2Freact-idle-screensaver/lists"}