React Is Caps Lock Active

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/reactiscapslockactive

Once done, using the component is as simple as this

import React from 'react'
import ReactIsCapsLockActive from '@matsun/reactiscapslockactive'

const MyApp = () => (
    <h1>Active or inactive</h1>
      {active => <span>Caps lock is {active ? 'active' : 'inactive'}</span>}