minimalist-typewriter
v1.20.0
Published
A very simple and performant package for typing out headings.
Downloads
7
Maintainers
Readme
Typewriter
A minimalist rewrite of Matt Boldt's Typed.js.
View the demo on GitHub Pages.
React
<h1>
<Typewriter strings={['My first string', 'My second string']} default="Prefill goes here" />
</h1>
or
<h1>
<Typewriter strings={['My first string', 'My second string']}>
My prefill text
</Typewriter>
</h1>
Traditional usage:
- Include with
<script src="typewriter.min.js"></script>
. - Call with
new Typed(selector, strings, config)
.
selector
should be a CSS selector (will only select first match) for the element to bind to, strings
should be an array containing the strings to transition to, and config
is an optional argument that should be an object of form:
{
"default": "This is my default string.",
"typeSpeed": 100, // default: "natural"
"backSpeed": 75, // default: "natural"
"cursor": false,
"highlight": true,
"loop": false,
}
i.e., new Typewriter("#typed-text", ["My first string", "My second string"])
.
Notes
- Unlike Typed.js,
loop
is true by default and starts automatically. Thedefault
string is set immediately, and then the strings are cycled through. Transitioning between two strings likeThis is my first string
andThis is my second string
will type naturally, backspacing only toThis is my
and then typing out the rest of the string.
Client-side standalone (closure compiled) is in dist/browser.js
.