react-screen-burn

React component to help prevent screen burn in (for example on wall panels)

Install

npm install --save react-screen-burn

Usage

import * as React from 'react';

import { ScreenBurnLine } from 'react-screen-burn';

class Example extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>React Screen Burn</h1>
        <p>
          React component to help prevent screen burn in (for example on wall
          panels)
        </p>
        <ScreenBurnLine
          colors={['#ff0000', '#00ff00', '#0000ff']}
          retriggerTime={1000}
          size={1}
          triggerTime={2000}
        />
      </React.Fragment>
    );
  }
}

Props

Prop	Type	Default	Description
colors	string[]	['#ff0000', '#00ff00', '#0000ff']	Array of CSS colors
retriggerTime	number	3600000 (1 hour)	Milliseconds until line restarts after reaching end of viewport
size	number	1	Pixel height of line. This will scale on high DPI displays, e.g. value of 1 on a 3 device pixel ratio screen will render as 1/3 of a display pixel (1 physical pixel)
triggerTime	number	3600000 (1 hour)	Milliseconds after render until line first starts

License

MIT © Sipcentric Ltd.