1.0.9 • Published 11 months ago
react-typed.ts v1.0.9
React Typing Effect
A lightweight React component for creating a typing effect similar to a typewriter, without any external dependencies.
Features
- Customizable Typing Speed: Control how fast the text is typed and deleted.
- Looping: Automatically loop through the provided strings.
- Custom Cursor: Customize the cursor character and choose whether to display it.
- Lightweight: Minimal dependencies, easy to integrate into any React project.
Installation
Install the package via npm:
npm install react-typed.ts
Or with Yarn:
yarn add react-typed.ts
Usage
1. Import and Use the TypingEffect
Component
First, import the TypingEffect
component and use it in your React project.
import React from 'react';
import TypingEffect from 'react-typed.ts';
const App: React.FC = () => {
return (
<div>
<h1>Welcome to My Website</h1>
<TypingEffect
strings={[
'Hello, World!',
'This is a typing effect.',
'React is awesome!',
'Enjoy coding!',
]}
typeSpeed={70}
backSpeed={50}
loop={true}
/>
</div>
);
};
export default App;
2. Customization Options
The TypingEffect
component accepts several props to customize the typing effect:
Usage
Props
Prop Name | Type | Default | Description |
---|---|---|---|
strings | string[] | ['Hello, World!', 'This is a typing effect.', 'React is awesome!', 'Enjoy coding!'] | An array of strings to be typed in sequence. |
stringsElement | string \| null | null | ID or instance of an HTML element containing string children. |
typeSpeed | number | 50 | Speed of typing in milliseconds. |
startDelay | number | 0 | Delay before typing starts in milliseconds. |
backSpeed | number | 30 | Speed of backspacing in milliseconds. |
smartBackspace | boolean | true | Only backspace what doesn't match the previous string. |
shuffle | boolean | false | Shuffle the strings randomly. |
backDelay | number | 700 | Time before backspacing in milliseconds. |
fadeOut | boolean | false | Fade out instead of backspace. |
fadeOutClass | string | 'typed-fade-out' | CSS class for fade animation. |
fadeOutDelay | number | 500 | Fade out delay in milliseconds. |
loop | boolean | false | Whether to loop the strings. |
loopCount | number | Infinity | Number of loops before stopping. |
showCursor | boolean | true | Show the typing cursor. |
cursorChar | string | '|' | Character for the cursor. |
autoInsertCss | boolean | true | Insert CSS for cursor and fadeOut into HTML. |
attr | string \| null | null | Attribute to type into (e.g., input placeholder, value , or just HTML text). |
bindInputFocusEvents | boolean | false | Bind to focus and blur if the element is a text input. |
contentType | 'html' \| 'null' | 'html' | Type of content to display: HTML or plaintext. |
onBegin | (self: any) => void | () => {} | Callback before typing begins. |
onComplete | (self: any) => void | () => {} | Callback when typing is complete. |
preStringTyped | (arrayPos: number, self: any) => void | () => {} | Callback before each string is typed. |
onStringTyped | (arrayPos: number, self: any) => void | () => {} | Callback after each string is typed. |
onLastStringBackspaced | (self: any) => void | () => {} | Callback during looping, after the last string is backspaced. |
onTypingPaused | (arrayPos: number, self: any) => void | () => {} | Callback when typing is paused. |
onTypingResumed | (arrayPos: number, self: any) => void | () => {} | Callback when typing is resumed after being paused. |
onReset | (self: any) => void | () => {} | Callback after the typing effect is reset. |
onStop | (arrayPos: number, self: any) => void | () => {} | Callback after the typing effect is stopped. |
onStart | (arrayPos: number, self: any) => void | () => {} | Callback after the typing effect is started. |
onDestroy | (self: any) => void | () => {} | Callback after the typing effect is destroyed. |
3. Advanced Usage
You can use the component multiple times within your application, passing different sets of strings or customization options to each instance.
<TypingEffect
strings={['Typing effect example 1', 'React components are great!']}
typeSpeed={60}
backSpeed={40}
loop={true}
/>
<TypingEffect
strings={['Another example', 'With a different cursor']}
typeSpeed={80}
backSpeed={60}
cursorChar="_"
/>
Here are some different effects you can achieve:
1. Different Typing Speed:
<TypingEffect
strings={["Fast typing", "Slow typing"]}
typeSpeed={100} // Typing speed
backSpeed={50} // Backspacing speed
loop={true}
/>
2. Fade Out Effect:
<TypingEffect
strings={["This will fade out", "And then this text will appear"]}
typeSpeed={50}
backSpeed={25}
fadeOut={true}
loop={true}
/>
3. Show Cursor or Hide Cursor:
<TypingEffect
strings={["No cursor", "Cursor visible"]}
typeSpeed={50}
showCursor={false} // Hides the cursor
loop={true}
/>
4. Smart Backspacing:
<TypingEffect
strings={["Backspacing only mismatched text", "Smart backspacing at work"]}
typeSpeed={50}
backSpeed={50}
smartBackspace={true} // Only backspace the part of the string that doesn't match
loop={true}
/>
5. Shuffle Strings:
<TypingEffect
strings={["Shuffled string 1", "Shuffled string 2", "Shuffled string 3"]}
typeSpeed={50}
shuffle={true} // Randomize the order of strings
loop={true}
/>
6. Custom Cursor Character:
<TypingEffect
strings={["Custom cursor character"]}
typeSpeed={50}
cursorChar={'_'} // Change the cursor character
loop={true}
/>
7. Typing Text with a Delay:
<TypingEffect
strings={["Delayed start typing"]}
typeSpeed={50}
startDelay={1000} // Delay before typing starts
backDelay={1000} // Delay before backspacing starts
loop={true}
/>
Example Combining Multiple Effects:
<TypingEffect
strings={["Typing fast!", "Then typing slow...", "And finally fading out!"]}
typeSpeed={100}
backSpeed={50}
startDelay={500}
backDelay={700}
fadeOut={true}
smartBackspace={true}
shuffle={true}
cursorChar={'|'}
loop={true}
/>
License
This project is licensed under the MIT License - see the LICENSE file for details.
Contributing
Contributions are welcome! Please open an issue or submit a pull request with your changes.
Author
Sivamani-18 - GitHub Profile