Nuclear Powered Mushroom

    react-lock-screen

    0.1.1 • Public • Published

    react-lock-screen

    Simple lock-screen for idle React applications

    Display a custom lock-screen when your React applications becomes idle

    Demo

    See it in action here

    Prerequisites

    Installation

    $ npm install react-lock-screen

    Usage

    import LockScreen from 'react-lock-screen'
    ...
     
    function App() {
     
      const getLockScreenUi = (setLock) => {
        return <button onClick={() => setLock(false)}>unlock</button>
      }
     
      return (
        <LockScreen
          timeout={2000}
          ui={getLockScreenUi}>
          <p>Lorem Ipsum is not simply</p>
        </LockScreen>
      )

    APIs (props)

    timeout

    type: number

    The number of idle (milliseconds) time before screen is locked

    ui

    type: function

    A function that returns some jsx representing the UI to show when screen is locked. Recieves a function argument that can be used to toggle lock-screen state.

    <LockScreen ui={setLock => <button onClick={setLock(false)}>unlock</button>}>
      ...
    </LockScreen>

    className

    type: string

    Class name to be applied to the blurred div when screen is locked. This is useful if you want to change the blur amount (or other styles) of the div.

    /* default styles */
    .react-lock-screen {
      filter: blur(4px);
      userselect: none;
      height: 100vh;
      overflow: hidden;
    }

    override default styles using className prop

    <LockScreen className="lock">
    ...
    .react-lock-screen.lock {
      /* your custom styles here */
    }

    onScreenLocked

    type: function

    Callback function that gets called when screen is locked

    onScreenUnlocked

    type: function

    Callback function that gets called when screen is unlocked

    Contributing

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    Please make sure to update tests as appropriate.

    License

    react-lock-screen is licensed under MIT

    Install

    npm i react-lock-screen

    DownloadsWeekly Downloads

    124

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    7.82 kB

    Total Files

    5

    Last publish

    Collaborators

    • codeshifu