react-stars-screensaver
v1.1.1
Published
Classic starscape animated screensaver for ReactJS web apps.
Downloads
154
Maintainers
Readme
react-stars-screensaver
Classic starscape screensaver for React applications.
React Idle Timer is used to hide the screensaver when user input is detected.
Usage
Install react-stars-screensaver from npm.
npm install react-stars-screensaver
Then use it in your React app.
Example without any props defined (screensaver always open):
import React from 'react'
import StarsScreenSaver from 'react-stars-screensaver'
const App = props => {
return <StarsScreenSaver/>
}
export default App;
Example with all props defined:
import React, { useState } from 'react'
import StarsScreenSaver from 'react-stars-screensaver'
import myLogo from './my-logo.png'
const App = props => {
const [isScreenSaverOpen, setIsScreenSaverOpen] = useState(false)
return <StarsScreenSaver
timeout={3600000} // screensaver opens after 1 hr idle
fadeDuration={1500}
isOpen={isScreenSaverOpen}
setIsOpen={setIsScreenSaverOpen}
logo={myLogo}
/>
}
export default App;
Props
isOpen
- controlls whether the screensaver is opensetIsOpen
- function called when user is idle for timeout duration or when user is active after timeout durationtimeout
- time is milliseconds that a user must be idle for before screensaver is openedfadeDuration
- time in milliseconds that applies to the animated transition as screeen saver opens/closeslogo
- image file to appear in center of screensaver