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
        isOpen={isScreenSaverOpen}
        setIsOpen={setIsScreenSaverOpen}
        timeout={3600000} // screensaver opens after 1 hr idle
        fadeDuration={1500}
        logo={myLogo}
        height={400}
        width={200}
        backgrounColor='#32a852'
    />
}

export default App;

Props

• isOpen - controlls whether the screensaver is open
• setIsOpen - function called when user is idle for timeout duration or when user is active after timeout duration
• timeout - time is milliseconds that a user must be idle for before screensaver is opened
• fadeDuration - time in milliseconds that applies to the animated transition as screeen saver opens/closes
• logo - image file to appear in center of screensaver
• height - height in pixels of screensaver (defaults to full height of window)
• width - width in pixels of screensaver (defaults to full width of window)
• backgroundColor - background color of screensaver (defaults to #013369)