auto-typer-ts

Description:

auto-typer-ts is a React/TypeScript npm package that allows you to create a typing effect on your website.

Installation:

npm install auto-typer-ts

Usage for React:

import AutoTyper from 'auto-typer-ts';

const titles = ['Javascript', 'React', 'TypeScript', 'Next', 'Angular'];

const App = () => {
  return (
    <div>
      <AutoTyper
        titles={titles}           
      />
    </div>
  );
};

Usage for Next.js:

import dynamic from 'next/dynamic';
const AutoTyper = dynamic(() => import('auto-typer-ts'), {
    ssr: false,
});

const titles = ['Javascript', 'React', 'TypeScript', 'Next', 'Angular'];

const App = () => {
  return (
    <div>
      <AutoTyper
        titles={titles}           
      />
    </div>
  );
};

Props:

Note: ms time is in milliseconds

Examples:

import AutoTyper from 'auto-typer-ts';

const titles = ['Javascript', 'React', 'TypeScript', 'Next', 'Angular'];

const App = () => {
  return (
    <div>
      <AutoTyper
        titles={titles}         
        styling="your-className"
        typingSpeedMax={100}
        typingSpeedMin={50}
        deletingSpeed={50}
        blinkingSpeed={500}
        pauseDelay={1000}
      />
    </div>
  );
};

styling prop:

able to use as a css / tailwind css style

CSS Example:

import AutoTyper from 'auto-typer-ts';

const titles = ['Javascript', 'React', 'TypeScript', 'Next', 'Angular'];

const App = () => {
  return (
    <div>
      <AutoTyper
        titles={titles}         
        styling="color: red; font-size: 20px;"
      />
    </div>
  );
};

Tailwind CSS Example:

import AutoTyper from 'auto-typer-ts';

const titles = ['Javascript', 'React', 'TypeScript', 'Next', 'Angular'];

const App = () => {
  return (
    <div>
      <AutoTyper
        titles={titles}         
        styling="text-red-500 text-2xl"
      />
    </div>
  );
};