TextScramble is a React component that animates text by gradually revealing it through a scrambled effect.
Install TextScramble via npm:
npm install @dilrukr/react-text-scramble
import React from 'react';
import TextScramble from '@dilrukr/react-text-scramble';
const YourComponent = () => {
return (
<div>
<h1>Welcome to TextScramble!</h1>
<TextScramble
texts={['Hello', 'World']}
// Other props...
/>
</div>
);
};
export default YourComponent;
Prop | Description | Default Value |
---|---|---|
texts | An array of strings to display and animate | ["Hello world from React Scramble "] |
letterSpeed | Speed at which individual letters are revealed | 20 |
nextLetterSpeed | Speed of revealing the next letter | 100 |
paused | Pauses the animation when set to true |
false |
pauseTime | Time to pause between text changes | 0 |
textStyles | Custom styles for the displayed text | - |
containerStyle | Custom styles for the component container | - |
scrambledColor | Color of the scrambled text | 'gray' |
revealedColor | Color of the revealed text | 'black' |
onAnimationEnd | Callback function triggered at the end of each text animation | - |
onTextScrambleComplete | Callback function triggered when all texts have been scrambled | - |
symbols | Array of symbols to use for scrambling | ["A", "B", ...] (Alphabets A to Z) |
<TextScramble texts={["Hello", "World"]} letterSpeed={20} />
<TextScramble
texts={["Hello", "World"]}
letterSpeed={20}
textStyles={{ fontSize: '24px', fontWeight: 'bold' }}
containerStyle={{ border: '1px solid black', padding: '10px' }}
/>
Contributions to the TextScramble component are welcome! To contribute, follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix:
git checkout -b my-feature
. - Implement your changes and commit them:
git commit -am 'Add new feature'
. - Push to the branch:
git push origin my-feature
. - Submit a pull request detailing your changes.
Feel free to open issues on the GitHub repository for feature requests, bug reports, or general feedback.
This project is licensed under the MIT License. See the LICENSE file for details.
Feel free to connect with me on Twitter, GitHub, and LinkedIn!