Package Exports

@matsun/reactiscapslockactive

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@matsun/reactiscapslockactive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ReactIsCapsLockActive

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.

Demo

Check out the demo!

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>
)