Gathering detailed insights and metrics for simple-typing-effect
Gathering detailed insights and metrics for simple-typing-effect
An npm package that provides a function for creating a typewriter effect on a web page
Installations
npm install simple-typing-effectDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.15.0
NPM Version
8.5.5
Score
67.4
Supply Chain
98.6
Quality
75.5
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
Developer
TPriince
Download Statistics
Total Downloads
493
Last Day
1
Last Week
1
Last Month
2
Last Year
102
GitHub Statistics
16 Commits
1 Watching
1 Branches
1 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.0.4
Package Id
simple-typing-effect@1.0.4
Unpacked Size
6.35 kB
Size
2.23 kB
File Count
3
NPM Version
8.5.5
Node Version
16.15.0
Publised On
01 Jul 2023
Total Downloads
Cumulative downloads
Total Downloads
493
Last day
0%
1
Compared to previous day
Last week
0%
1
Compared to previous week
Last month
-33.3%
2
Compared to previous month
Last year
-73.9%
102
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
Versions
SimpleTypingEffect NPM Package Documentation
simple-typing-effect is an npm package that provides a function for creating a typewriter effect on a web page. It simulates the appearance of typing and deleting text, creating a dynamic and engaging user experience.
Table of Contents
Installation
You can install simple-typing-effect via npm by running the following command:
1npm install simple-typing-effect
Syntax
1typingEffect( 2 arrayOfWords, 3 wrapperId, 4 options, 5 forwardSlashSpeed, 6 backwardSlashSpeed, 7 infinite 8);
Usage
To use simple-typing-effect, you need to import the package and call the typingEffect function with the required parameters.
1import { typingEffect } from "simple-typing-effect"; 2 3const arrayOfWords = [ 4 "Hello World!", 5 "This is the", 6 "simple-typing-effect", 7 "npm package", 8]; 9const wrapperId = "typing-wrapper"; // id of the wrapper element in your HTML 10 11// Customize options if needed (optional) 12const options = { 13 textColor: "black", 14 cursorColor: "black", 15 width: "2px", 16 height: "1rem", 17}; 18 19// Customize typing and deleting speeds (optional) 20const forwardSlashSpeed = 118; 21const backwardSlashSpeed = 65; 22 23// Customize repetition (optional) 24const infinite = true; 25 26// Call the typingEffect function with the provided parameters (optional) 27typingEffect( 28 arrayOfWords, 29 wrapperId, 30 options, 31 forwardSlashSpeed, 32 backwardSlashSpeed, 33 infinite 34);
Parameters
The typingEffect function accepts the following parameters:
- arrayOfWords (array): An array of words to be typed out.
- wrapperId (string): The ID of the HTML element that will contain the typewriter effect.
- options (object, optional): An object that specifies additional options for the typewriter effect. It can have the following properties:
- textColor (string, default: "black"): The color of the typed text.
- cursorColor (string, default: "white"): The color of the typing cursor.
- width (string, default: "2px"): The width of the typing cursor.
- height (string, default: "1rem"): The height of the typing cursor.
- forwardSlashSpeed (number, default: 118): The speed of typing forward slash characters (in milliseconds).
- backwardSlashSpeed (number, default: 65): The speed of typing backward slash characters (in milliseconds).
- infinite (boolean, default: true): Determines whether the typing effect should repeat infinitely.
Example
Here's an example of how to use typingEffect:
In your index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Typing Effect Example</title> 5 </head> 6 <body> 7 <div id="typing-wrapper"></div> 8 <script src="./index.js" type="module"></script> 9 </body> 10</html>
In your index.js
1import { typingEffect } from "simple-typing-effect"; 2 3const arrayOfWords = ["Welcome to the", "simple-typing-effect", "npm package"]; 4const wrapperId = "typing-wrapper"; // id of the wrapper element in your HTML 5 6// Customize options (optional) 7const options = { 8 textColor: "purple", 9 cursorColor: "red", 10 width: "3px", 11 height: "1.5rem", 12}; 13 14// Customize typing and deleting speeds (optional) 15const forwardSlashSpeed = 150; 16const backwardSlashSpeed = 80; 17 18// Customize repetition (optional) 19const infinite = false; 20 21// Call the typingEffect function with the provided parameters 22typingEffect( 23 arrayOfWords, 24 wrapperId, 25 options, 26 forwardSlashSpeed, 27 backwardSlashSpeed, 28 infinite 29);
In this example, the typing effect will render the array of words one after the other with a purple text color and a red typing cursor. The cursor will have a width of 3 pixels and a height of 1.5 rem. The typing speed for adding characters will be 150 milliseconds, and the deleting speed will be 80 milliseconds.
Credits
This NPM package was developed by Tobiloba Odukoya.
No vulnerabilities found.
No security vulnerabilities found.