A custom element that shows text as if it were being typed
Перейти к файлу
Manuel Puyol 5be77359d4
Merge pull request #7 from github/move-AOR-to-primer
move AOR to primer
2022-09-23 12:53:47 -05:00
.github/workflows Create .github/workflows/publish.yml 2022-03-30 13:01:35 +01:00
examples fix unpkg link 2021-05-04 18:08:36 +01:00
src Merge branch 'main' into main 2021-06-04 10:00:00 +01:00
test Merge branch 'main' into main 2021-06-04 10:00:00 +01:00
.eslintignore Initial commit 2021-04-08 17:57:50 -07:00
.eslintrc.json Reverts some inadvertent markdown formatting changes and unnecessary eslint config entry. 2021-05-28 11:26:12 -05:00
.gitattributes Initial commit 2021-04-08 17:57:50 -07:00
.gitignore Initial commit 2021-04-08 17:57:50 -07:00
.travis.yml Initial commit 2021-04-08 17:57:50 -07:00
CODEOWNERS move AOR to primer 2022-09-23 18:51:16 +01:00
CODE_OF_CONDUCT.md Initial commit 2021-04-08 17:57:50 -07:00
CONTRIBUTING.md Initial commit 2021-04-08 17:57:50 -07:00
LICENSE Initial commit 2021-04-08 17:57:50 -07:00
README.md Adds mock condition for window.matchMedia for default case (prevents the test from setting delay to 0 when user has reduced motion set on their system). Removes code paths and mentions of attribute data-reduced-motion because including an escape hatch right now might be a bit confusing. 2021-06-01 16:08:44 -05:00
SECURITY.md Initial commit 2021-04-08 17:57:50 -07:00
karma.config.cjs configure karma to use chromium 2022-02-16 23:40:26 +00:00
package-lock.json remove karma-firefox-launcher 2022-02-16 23:41:04 +00:00
package.json remove karma-firefox-launcher 2022-02-16 23:41:04 +00:00
tsconfig.json Initial commit 2021-04-08 17:57:50 -07:00

README.md

<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!", "Lets 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.