0.0.2 • Published 6 months ago
auto-typer-ts v0.0.2
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:
props | type | description | default value |
---|---|---|---|
styling | string | CSS styling for the text | "typer" |
titles | string[] | An array of strings that will be typed out | "test text", "for auto-typer-ts" |
typingSpeedMax | number | The maximum typing speed | 110 in ms |
typingSpeedMin | number | The minimum typing speed | 50 in ms |
deletingSpeed | number | The speed at which the text is deleted | 70 in ms |
blinkingSpeed | number | The speed at which the cursor blinks | 600 in ms |
pauseDelay | number | The delay between typing and deleting | 1500 in ms |
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>
);
};