React Mechanical Keyboard ⌨️

A light weight React component for emulating typing animations.

Install

npm i react-mk --save

No need to import pesky CSS files, react-mk works right out of the box.

Example

Test it out on codesandbox

Instructions

• Import Keyboard from react-mk

• Keyboard accepts any child with a valid toString method

• Keyboard exposes a type method when children is a type of function

• Keyboard will type out your text in an organic manner, see example

• Besides children, Keyboard can take the following optional props

  • sentenceDelayPerCharRange: an array of two numbers indicating the delay in milliseconds which react-mk applies between words, the delay is calculated by getting a random number in your range and multiplying it by the number of characters in your sentence.
  • keyPressDelayRange: an array of two numbers indicating the delay in milliseconds which react-mk applies between characters, the delay is calculated by getting a random number in your range.

• You may also import the Cursor component from react-mk; a standard blinking cursor that accepts the following props

  • children: the cursor you wish to display, it will accept any node and is a | by default
  • blink: a bool which is true by default, when false the cursor will not blink
  • blinkAnimationDuration: the animation-duration of the css animation property of the cursor
  • All other props will be spread to the root element which is a span

Usage

import React from 'react';
import Keyboard, { Cursor } from 'react-mk';

const TypingComponent = () => (
  <>
    <Keyboard sentenceDelayPerCharRange={[0, 0]}>You can write whatever you like here</Keyboard>
    <Cursor />
    <br />
    <Keyboard keyPressDelayRange={[200, 400]}>
      {({ type }) =>
        type(
          1000,
          'You can even type super slowly using the keyPressDelayRange prop',
          300,
          'Set the blink property of Cursor to false to disable the blinking animation --> ',
        )
      }
    </Keyboard>
    <Cursor blink={false} />
    <br />
    <Keyboard sentenceDelayPerCharRange={[0, 0]} keyPressDelayRange={[50, 70]}>
      {({ type }) => type(3000, 'Multiple instances of Keyboard can easily be rendered at the same time')}
    </Keyboard>
    <Cursor>#</Cursor>
    <br />
    <Keyboard sentenceDelayPerCharRange={[300, 400]}>
      {({ type }) =>
        type(
          4000,
          "Use the sentenceDelayPerCharRange prop to adjust the amount of time that your sentences should be visible (It'll be a while before the next sentence appears)",
          'You can also pass a number to the `type` function to dictate the time between deleting the previous sentence and writing the next sentence',
        )
      }
    </Keyboard>
    <Cursor blinkAnimationDuration={200}>[]</Cursor>
  </>
);