react-mk
v1.1.6
Published
A light weight React component for emulating keyboard typing.
Downloads
27
Maintainers
Readme
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
fromreact-mk
Keyboard
accepts any child with a validtoString
methodKeyboard
exposes atype
method whenchildren
is a type offunction
Keyboard
will type out your text in an organic manner, see exampleBesides
children
,Keyboard
can take the following optional propssentenceDelayPerCharRange
: an array of two numbers indicating the delay in milliseconds whichreact-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 whichreact-mk
applies between characters, the delay is calculated by getting a random number in your range.
You may also import the
Cursor
component fromreact-mk
; a standard blinking cursor that accepts the following propschildren
: the cursor you wish to display, it will accept anynode
and is a|
by defaultblink
: a bool which istrue
by default, whenfalse
the cursor will not blinkblinkAnimationDuration
: theanimation-duration
of thecss
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>
</>
);