# @dilrukr/react-text-scramble

> Simple react scramble animation

Latest version **1.0.5** (published 2023-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dilrukr/react-text-scramble
pnpm add @dilrukr/react-text-scramble
yarn add @dilrukr/react-text-scramble
bun add @dilrukr/react-text-scramble
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-12-20 |
| First published | 2023-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Rishan Dilruk |
| Maintainers | dilrukr |

## Links

- npm: https://www.npmjs.com/package/@dilrukr/react-text-scramble
- Repository: https://github.com/DilrukR/react-scramble
- Homepage: https://github.com/DilrukR/react-scramble#readme
- Issues: https://github.com/DilrukR/react-scramble/issues
- npm.io page: https://npm.io/package/@dilrukr/react-text-scramble

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.23.4
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.23.6
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.23.6
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.23.3

## Recent versions

- 1.0.5 (latest) — 2023-12-20
- 1.0.4 — 2023-12-19
- 1.0.3 — 2023-12-19
- 1.0.2 — 2023-12-19
- 1.0.1 — 2023-12-19
- 1.0.0 — 2023-12-18

## README

[![npm version](https://badge.fury.io/js/your-package-name.svg)](https://badge.fury.io/js/your-package-name)
[![code style: eslint](https://img.shields.io/badge/code_style-eslint-5a11ff.svg)](https://eslint.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

# 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:

```bash
npm install @dilrukr/react-text-scramble
```
## Example Code

```bash
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

```bash
<TextScramble texts={["Hello", "World"]} letterSpeed={20} />
```
## Custom Styling

```bash
<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](https://github.com/DilrukR/react-scramble) for feature requests, bug reports, or general feedback.

## License

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.


## Follow Me On

[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/DilrukR)
[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/dilrukr/)

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

---
_Source: https://npm.io/package/@dilrukr/react-text-scramble · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._