TextScramble

TextScramble is a React component that animates text by gradually revealing it through a scrambled effect.

https://github.com/DilrukR/react-scramble/assets/68820399/702acd2e-116f-41c3-a63f-cb0d896a8a06

Installation

Install TextScramble via npm:

npm install @dilrukr/react-text-scramble

Example Code

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;

Props for TextScramble Component

| 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) |

Examples

Basic Usage

<TextScramble texts={["Hello", "World"]} letterSpeed={20} />

Custom Styling

<TextScramble
  texts={["Hello", "World"]}
  letterSpeed={20}
  textStyles={{ fontSize: '24px', fontWeight: 'bold' }}
  containerStyle={{ border: '1px solid black', padding: '10px' }}
/>

Contributing

Contributions to the TextScramble component are welcome! To contribute, follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix: git checkout -b my-feature.
3. Implement your changes and commit them: git commit -am 'Add new feature'.
4. Push to the branch: git push origin my-feature.
5. Submit a pull request detailing your changes.

Feel free to open issues on the GitHub repository for feature requests, bug reports, or general feedback.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Follow Me On

Feel free to connect with me on Twitter, GitHub, and LinkedIn!