kg-type Web Component

• What's this?
• Usage
  • Minimal example
  • Options
  • Complete example
  • Custom CSS
• Contributing
  • Where to start?
  • Tooling
• License

What's this?

⬆️ Back to Top

A pure JavaScript Web Component to write-out text letter by letter, and optionally remove it letter-by-letter. It's quite customizable and comes with sensible defaults.

Usage

Minimal example

<kg-type words="Hello"></kg-type>

Options

|Option|Default|Description| |------|-------|-----------| |seperator|,| Seperator to split provided words list at. | |cursor|_| The curors behind letters, set to empty string to remove. | |words| | A list of words to write out, seperated by the seperator (as defined above, or , by default) | |clear-interval|2000| Time in milliseconds (ms) after which the word is cleared | |type-interval|150| Time in milliseconds (ms) at which letters are written | |shuffle|false| Set to true if words should be shuffled once before writing begins. | |delete-reverse|false| Set to true to remove word letter by letter after writing |

Only words is required as all other values have defaults.

Complete example

Languages I like: <kg-type seperatpr="," cursor="|" words="Rust, JavaScript, Python, Go" clear-interval="3000" type-interval="100" shuffle="true" delete-reverse="true"></kg-type>

Custom CSS

The component adapts the styles of its surrounding but three distinct values can be set using CSS custom properties:

.custom-style {
    --kg-type-display: inline-block;
    --kg-type-color: #000;
    --kg-type-fontsize: 1rem;
}

Contributing

⬆️ Back to Top

We love and welcome every form of contribution.

Where to start?

Here are some good places to start:

• Issues with label Good first issue
• Issues with label Documentation
• Providing example implementations or usage demos

Tooling

• mktoc is used for table of content generation in the README.md
• With npm run dev a static file server using the nodejs http-server package is started, this is optional

License

⬆️ Back to Top

MIT, see LICENSE file.