typed-js-wc - The Typed.js Web Component

<typed-js-wc strings="String number 1, String number 2"></typed-js-wc>

The Typed.js Web Component for better reusability.

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

Checkout the offical project here.

Installation

npm install --save typed-js-wc

Usage

For the most basic usage pass a strings property with your desired strings divided by a comma. This property is required.

<typed-js-wc strings="String number 1, String number 2"></typed-js-wc>

To have some fixed text add a HTML Element with a slot property and it's value as fixed.

<typed-js-wc strings="String number 1, String number 2">
  <h1 slot="fixed">I'm fixed text</h1>
</typed-js-wc>

For additional configuration, see the options at https://github.com/mattboldt/typed.js#customization then pass an options property. It should be an object with any of the options defined in the link above.

For vanilla/plain html users the best way would be to give the component a proper selector e.g an ID then use JS to pass options.

<typed-js-wc strings="String number 1, String number 2" id="exampleID">
</typed-js-wc>

<script>
    document.getElementById("exampleID").options = {typeSpeed: 40, startDelay: 0};
<script>

For react,angular,vue,stencil etc you can pass it directly or use method above.

render(){
    return (<typed-js-wc strings="String number 1, String number 2" options={{typeSpeed: 40,startDelay: 0}}>
</typed-js-wc>);
}

You can pass html elements such as headings,paragraphs,bold,small etc as strings too.

<typed-js-wc strings="<b>First</b> sentence.,& a second sentence.">
</typed-js-wc>

Styling

typed-js-wc uses CSS Variables. Available variables are:

1. --font-size
2. --font
3. --color
4. --font-weight
5. --font-family

typed-js-wc {
    --font-size: 20px,
    --color: blue,
}