npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wc-typeit

v1.0.12

Published

A native web component build using Stencil.Js to implement typing effect. Can be easily integrated with any front-end framework.

Downloads

12

Readme

TypeIt typewriter effect!

A very intelligent typewriter effect web component which can loop through an array of sentences to render them as typewriter effect. It is smart enough to delete only necessary characters instead of deleting all before rendering the next sentence.

Installation

Package manager


# with npm
npm i wc-typeit

# with yarn
yarn add wc-typeit

CDN

<script type="module" src="https://unpkg.com/wc-typeit@latest/dist/wc-typeit/wc-typeit.esm.js"></script>
<script nomodule src="https://unpkg.com/wc-typeit@latest/dist/wc-typeit/wc-typeit.js"></script>

Options

| Name | Type | Default value | Description | | ----------- | ------------------------------ | --------------- | ------------------------------------------------------------------ | | sentences | String[] | null | Strings you want to shuffle between | | loop | 'Loop.Infinite' or 'Loop.Once' | 'Loop.Infinite' | Should it iterate through strings once or Infinite number of times |

Methods

All methods need to be subscribed to to perform follow-up action

| Name | Params | Description | | ------- | ------ | ----------------------------------------------------------------------- | | start | - | Start the typewriter effect. | | stop | - | Stop the typewriter effect. It stops upon completing one sentence cycle |

Events

| Event | Type | Description | | ------------------ | ------------------- | ---------------------------------------------------------- | | animationLoopEnd | CustomEvent<void> | An event which is emitted once an animation loop completes |

Slottable

This web component is slottable which means you can inject a starter text which should always be displayed on load and just once. It is totally optional.

Usage

Just install the package and start using it as a custom web component

Integration

import { Loop } from 'wc-typeit';

const sentences = ['This is wc-typeit', 'It is EASY to USE!', 'It is EASY to INTEGRATE!', 'It is EASY to STYLE!'];

<wc-typeit sentences={sentences} loop={Loop.Once}>
    Default text which shows up during loading...
</wc-typeit>

Methods

One can get reference to the wc-typeit element and call start and stop methods on it

private ref: HTMLWcTypeitElement;

private async startAnimation() {
    this.ref.start().then(() => {
        // your custom logic
    }).catch(() => {
        console.error('Cannot start animation as it is already running');
    });
}

private async stopAnimation() {
    this.ref.stop().then(() => {
        // your custom logic
    }).catch(() => {
        console.error('Cannot stop animation as it is already stopped');
    });
}

<wc-typeit sentences={this.sentences} loop={Loop.Once} ref={elem => this.ref = elem}>
    Default text which shows up during loading...
</wc-typeit>

Listeners

You can listen to animationLoopEnd method which fires whenever an animation loop showing all the sentences ends

private handleAnimationLoopEnd() {
    // your custom logic
}

<wc-typeit sentences={sentences} loop={Loop.Once} animationLoopEnd={this.handleAnimationLoopEnd}>
    Default text which shows up during loading...
</wc-typeit>

Styling

This web component has no nested elements except the text node itself which makes styling it as east as styling any other element.

wc-typeit {
  color: maroon;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  width: 300px;
}

One can change the cursor color by applying the following styles

wc-typeit {
  --cursor-color: green !important;
}