react-mk
TypeScript icon, indicating that this package has built-in type declarations

1.1.6 • Public • Published

React Mechanical Keyboard ⌨️

GitHub license npm Build Status Coverage Status code style: prettier PRs Welcome

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

Package Sidebar

Install

npm i react-mk

Weekly Downloads

27

Version

1.1.6

License

MIT

Unpacked Size

24.2 kB

Total Files

23

Last publish

Collaborators

  • typekev