Simple lock-screen for idle React applications
npm install react-lock-screen> Simple lock-screen for idle React applications
Display a custom lock-screen when your React applications becomes idle
``bash`
$ npm install react-lock-screen
`jsx
import LockScreen from 'react-lock-screen'
...
function App() {
const getLockScreenUi = (setLock) => {
return
}
return (
ui={getLockScreenUi}>
Lorem Ipsum is not simply
APIs (props)
$3
type:
The number of idle (milliseconds) time before screen is locked
$3
type:
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.
jsx
}>
...
`$3
type:
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.
css
/ default styles /
.react-lock-screen {
filter: blur(4px);
userselect: none;
height: 100vh;
overflow: hidden;
}
`
override default styles using className prop
jsx
...
`css
.react-lock-screen.lock {
/ your custom styles here /
}
`$3
type:
Callback function that gets called when screen is locked
$3
type:
Callback function that gets called when screen is unlocked
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.
react-lock-screen is licensed under MIT