TextScramble

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

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!