<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.

npm install --save typed-js-wc 

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>

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, }