↗️✨ Cmmnd

Cmmnd is a styled, customizable React component tailored for presenting keyboard shortcuts on the web.

Install

Install

npm install cmmnd

Usage

import {Command} from 'cmmnd'

function App() {
  return (
    <>
    //...
        <Command variant='light' triggerKeys={['Control', 'Shift']} />
    //...
    </>
  )
}

Styling

Cmmnd is bundled with wonderful and minimal styles out of the box. Although, if you want to customize it, you can do it with TailwindCSS classes.

This feature is powered by clsx and Tailwind merge

Assuming that you have tailwind installed and configured in your app:

<Command wrapperClassName='bg-zinc-800 rounded-xl' keysClassName='text-white bg-zinc-600'/>

Props

Cmmnd provides some props to make the component flexible and adjustable to your needs.

variant = 'light' | 'default'

<Command variant='light'/>

triggerKeys = string[]

Trigger cmmnd only when shortcuts starts with the keys provided in the array

<Command triggerKeys={['Control', 'Shift']}/>

side = 'bottom' | 'bottomRight' | 'bottomLeft' | 'topRight' | 'topLeft'

Decide where cmmnd is placed, bottom as default.

<Command side='bottomRight'/>

repeatKeys = boolean

Allow repeated keys to be shown in cmmnd. False as default.

<Command repeatKeys/>

disappearAfter = number --> in ms

Decide how much time cmmnd is shown after is triggered. 2 seconds as default

<Command disappearAfter={4000}/>

wrapperClassName = string

Add tailwind classes to the wrapper

<Command wrapperClassName='bg-zinc-800 rounded-xl'/>

keysClassName = string

Add tailwind classes to the pressed keys

<Command keysClassName='text-white bg-zinc-600'/>