Typewriter web component
a type-writer web component
npm i @eatsjobs/type-writer
import '@eatsjobs/type-writer'
or
<script type="module">
import 'node_modules/@eatsjobs/type-writer';
</script>
<type-writer
style="
--playground-background: #282a36;
--text-color: #50fa7b;
--font-family: Special Elite, cursive;
--font-size: 2.5rem;
--cursor-width: 1.5rem;
--cursor-height: 0.5rem;
"
autostart
linebreakdelay='1000'
typingdelay='75'
>
Hello I'm @eatsjobs.
This is a type-writer web component
To style it you have some css variables:
--text-color
--playground-background
--font-family
--font-size
--cursor-width
--cursor-height
You also have some attributes and properties to be able to interact with:
- linebreakdelay
- typingdelay
- autostart
And also some methods to stop, restart, pause and resume the typewriting.
</type-writer>
Documentation
Attributes
Attribute |
Type |
Description |
autostart |
Boolean |
start on mount |
linebreakdelay |
Number |
the delay between after linebreak \n |
typingdelay |
Number |
the delay between each word in ms |
Properties
Property |
Type |
autoStart |
boolean |
lineBreakDelay |
number |
typingDelay |
number |
Methods
Method |
Type |
clean |
(): void |
createLetterGenerator |
(): Generator<string, string, unknown> |
pause |
(): Promise<void> |
restart |
(): Promise<void | null> |
resume |
(): void |
start |
(): Promise<void | null> |
stop |
(): Promise<void> |
Events
Event |
Type |
Description |
done |
CustomEvent<any> |
Dispatched when type-writing naturally finish |
CSS Custom Properties
Property |
Description |
--cursor-height |
the height of the cursor; |
--cursor-width |
the width of the cursor |
--font-family |
font-family |
--font-size |
font-size |
--playground-background |
the background of the container |
--text-color |
the color of the text |