README
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