1.20.0 • Published 5 years ago
minimalist-typewriter v1.20.0
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:
1. Include with <script src="typewriter.min.js"></script>.
2. 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,
loopis true by default and starts automatically. Thedefaultstring is set immediately, and then the strings are cycled through. Transitioning between two strings likeThis is my first stringandThis is my second stringwill type naturally, backspacing only toThis is myand then typing out the rest of the string.
Client-side standalone (closure compiled) is in dist/browser.js.