Nine Parsecs from Milwaukee

    @github/typing-effect-element
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    <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.

    Keywords

    none

    Install

    npm i @github/typing-effect-element

    DownloadsWeekly Downloads

    21

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    6.96 kB

    Total Files

    5

    Last publish

    Collaborators

    • jfuchs
    • githubbot
    • manuelpuyol
    • jonrohan
    • broccolini
    • mislav
    • mdo
    • primer-css
    • keithamus
    • mschoening
    • koddsson
    • emilybrick
    • lgarron
    • colebemis
    • smockle
    • simurai
    • khiga8
    • dustin.greif
    • srt32