React component that tracks whether or not Caps lock is active

by React

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.

View demo Download Source

Usage

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 = () => (
  <div>
    <h1>Active or inactive</h1>
    <ReactIsCapsLockActive>
      {active => <span>Caps lock is {active ? 'active' : 'inactive'}</span>}
    </ReactIsCapsLockActive>
  <div>
)

GitHub