@eatsjobs/type-writer
v1.0.0
Published
A type-writer web-component
Downloads
3
Readme
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 |