ReactIsCapsLockActive is a lightweight and easy to use React component that tracks whether or not Caps lock is active. A typical usecase would be to inform a user who is typing their password if Caps lock is active. The state of Caps lock is provided to the consumer as an argument by function as a child. The argument is a boolean which will be true when Caps lock is active and false when Caps lock not active.
First, install the component
$ yarn add @matsun/reactiscapslockactiveOnce done, using the component is as simple as this
import React from 'react'
import ReactIsCapsLockActive from '@matsun/reactiscapslockactive'
const MyApp = () => (
<div>
<h1>Active or inactive</h1>
<ReactIsCapsLockActive>
{active => <span>Caps lock is {active ? 'active' : 'inactive'}</span>}
</ReactIsCapsLockActive>
<div>
)