Getting Started with Typewriter Animation

This package is created using React library. Component styling was done using Styled Components.

Available Scripts

In the project directory, you can run:

npm i typewriter-animation-adjustable

This will download the package to your node_modules folder.

How to Use - ("*"-Seperates the display string value into header and description)

Once the package is downloaded, it will be added to your package.json file along with the version number.

To use the package, eg: React Project

1. First import the package to your component or file where you want to implement this feature.

 import  TypewriterAnimation  from "typewriter-animation-adjustable";

2. Then, To use the package, You can call the package like shown below.

 <TypewriterAnimation/>;

3. Now this wil add the component to your project with its default values. This package can be customized according to your preferences, by passing values to the parameters given. Below is an example of how to use the package with custom parameters passed to it.

<TypewriterAnimation containerBgColor="bg-primary" descColor="white" value="Hi, I am John Smith * I am a web developer"/>;

output of above will be;

Hi, I am John Smith;

I am a web developer;

Customizable CSS properties

The list of properties that you can use to customize the package is shown below, given values are the set defaults of the package. You can customize below with general css and value properties.

-NOTE:Use ("*") in value paramter, to seperate Header and description contentS

value="Hey, This is My Heading * & Description !", headerBlinkTimer="1000", <---- This will decide how long blinker will display descriptnBlinkTimer="5000", containerMargin="0%", containerPadding="0%", containerBgColor=""#48c9b0"", containerAlignItems="start", containerJustifyContent="start", containerHeight="auto", containerWidth="100%", containerDisplay="inline-block", headerColor="white", headerFontSize="5em", headerFontFamily="system-ui", headerMargin="0%", headerPadding="0%", descriptionColor="black", descriptionFontSize="4em", descriptionFontFamily= "system-ui", descriptionMargin="0.1em 0.1em 0.1em 0.1em", descriptionPadding="0.1em 0.1em 0.1em 0.1em", descriptionBlinkerHeight="1em", <---- Height of the blinker headerBlinkerWidth="0.05em", headerBlinkerColor="white", headerBlinkerDisplay="false", <---- Pass true to display header blinker headerBlinkerMargin= "0px 0px 0px 10px", headerBlinkerTop="0.15em", descriptionBlinkerHeight="1em", descriptionBlinkerWidth="0.05em", descriptionBlinkerColor= "black", descriptionBlinkerDisplay="true", <---- Pass false to hide description blinker descriptionBlinkerMargin= "0px 0px 0px 10px", descriptionBlinkerTop="0.15em", <---- distance to blinker from top of the container headerTextTransform="none", headerFontWeight="none, descriptionTextTransform="none, **descriptionFontWeight**="none

Limitations

Note:Current version only supports with two text sections. Header Data, and Description Data. You can use Paragraph seperator("*") Only once in the value="Hello there, * How are you?", paramter string.

Package Versions in latest version

"@babel/polyfill": "^7.12.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "core-js": "^2.6.5",, "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "styled-components": "^5.3.6", "devDependencies": { "@babel/cli": "^7.19.3", "@babel/core": "^7.19.3", "@babel/preset-env": "^7.19.4" }