@bitpas/typist
v0.2.1
Published
Animated typing utility
Downloads
3
Maintainers
Readme
Typist
Animated typing utility.
Installation
Install @bitpas/typist
with npm.
npm install @bitpas/typist
Usage
Import
Import Typist as an ES module
import Typist from '@bitpas/typist';
or require as CommonJS.
const Typist = require('@bitpas/typist');
Initialize
Declare a new instance of Typist.
The Typist instance method takes two arguments: a required callback to which Typist's output is passed as the argument, and an optional configuration object to override Typist's defaults.
const myCallback = (output) => console.log(output);
const myOptions = { speed: 320 };
const myTypist = new Typist(myCallback, myOptions);
Run
On the initialized instance of Typist, pass the desired output as a string to the type
method, and call the start
method to begin the animation.
myTypist.type('My typed message.').start();
React hook example
import React, { useEffect, useState } from 'react';
import Typist from '@bitpas/typist';
const Component = () => {
const [greeting, setGreeting] = useState('');
useEffect(() => {
const greetingTypist = new Typist(setGreeting);
greetingTypist.type('foobar').start();
return function cleanup() {
greetingTypist.stop();
};
}, []);
return <h1>{greeting}</h1>;
};
export default Component;
Combining methods
Non-chainable methods
The instance methods start
and stop
are not chainable. start
should come at the end of a method chain to begin the animation. stop
is useful in cases such as React effect cleanup.
Chainable methods
The instance methods type
, backspace
, and pause
can be chained to create complex output.
myTypist
.type('Delete me')
.backspace('all')
.type('Vowels: aeiouy')
.pause(500)
.backspace()
.type('[y]')
.pause(1000)
.backspace(3)
.type(' and sometimes y')
.start();
API
new Typist(callback, [options])
- Arguments
- callback:
function
- Callback to which the output from Typist is passed as an argument - options:
object
- Optional configuration settings
- callback:
- Returns: Typist
Non-chainable instance methods
Typist.start()
- Arguments: none
- Returns: undefined
Typist.stop()
- Arguments: none
- Returns: undefined
Chainable instance methods
Typist.type(string)
- Arguments
- string
string
: Output to callback
- string
- Returns: Typist instance object
Typist.backspace(value)
- Arguments
- value
number
orstring
:n
: Delete n characters'all'
: Delete output length- Default:
1
- value
- Returns: Typist instance object
Typist.pause(value)
- Arguments
- value
number
: time in milliseconds
- value
- Returns: Typist instance object
Options
// default options
const defaults = {
speed: 120,
};
speed number
- Speed of the animation in milliseconds