@github/typing-effect-element
npm i @github/typing-effect-element

@github/typing-effect-element

A custom element that shows text as if it were being typed

by github

0.1.0 (see all)License:MITTypeScript:Not Found
npm i @github/typing-effect-element
Readme

<typing-effect> element

A custom element that shows text as if it were being typed

Installation

$ npm install @github/typing-effect-element

Usage

import '@github/typing-effect-element'
<typing-effect data-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'>
  <span data-target="typing-effect.content"></span>
  <span data-target="typing-effect.cursor">|</span>
</typing-effect>

Accessibility

This component detects whether prefers-reduced-motion is set on the window:

window.matchMedia('(prefers-reduced-motion)').matches === true

If this evaluates to true, any content lines provided will be appended immediately rather than being typed out with a delay.

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

Downloads/wk

20

GitHub Stars

72

LAST COMMIT

1yr ago

MAINTAINERS

14

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.1.0
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial