# react-scramble

Latest version **0.5.1** (published 2021-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-scramble
pnpm add react-scramble
yarn add react-scramble
bun add react-scramble
```

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.1 |
| Published | 2021-03-26 |
| First published | 2018-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-scramble) |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 21.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51 |
| Maintainers | cettoana |
| Keywords | react, react-component |

## Links

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

## Dependencies (4)

- [rxjs](https://npm.io/package/rxjs.md) ^6.2.0
- [ramda](https://npm.io/package/ramda.md) ^0.25.0
- [recompose](https://npm.io/package/recompose.md) ^0.30.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.1 (latest) — 2021-03-26
- 0.5.0 — 2021-03-26
- 0.4.2 — 2019-05-02
- 0.4.1 — 2019-05-02
- 0.4.0 — 2019-05-02
- 0.3.0 — 2019-05-02
- 0.2.0 — 2018-05-31
- 0.1.2 — 2018-05-30
- 0.1.1 — 2018-05-20
- 0.1.0 — 2018-05-18
- 0.0.2 — 2018-05-18
- 0.0.1 — 2018-05-17

## README

<h1 align="center">
	<br>
	<img width="600" src="media/banner.gif" alt="react-scramble">
	<br>
	<br>
  <br>
</h1>

[![npm version](https://img.shields.io/npm/v/react-scramble.svg?style=flat-square)](https://www.npmjs.com/package/react-scramble)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](#badge)

React component for text scramble animation.

[Live Demo](https://cettoana.github.io/react-scramble)

## Installation

```bash
npm install react-scramble --save
```

## Usage

```javascript
import React from 'react'
import Scramble from 'react-scramble'

class App extends React.Compoent {
  render() {
    return (
      <Scramble
        autoStart
        text="Scramble me!"
        steps={[
          {
            roll: 10,
            action: '+',
            type: 'all',
          },
          {
            action: '-',
            type: 'forward',
          },
        ]}
      />
    )
  }
}
```

Remember to use `monospace` fonts to make it looks better.

## Step Format

Each step is an `Object` with following keys:

| Key    | Type   | Default | Description                                                                            |
| :----- | :----- | :------ | :------------------------------------------------------------------------------------- |
| action | string |         | Action of the step, `+` as scramble, `-` as descramble and leave blank for do nothing. |
| roll   | number |         | Times of action in the step.                                                           |
| text   | string |         | Change the original text.                                                              |
| type   | string | `all`   | Scramble/descrmble type of the step, one of `all`, `random`, `forward`.                |

## Scramble Props

| Property          | Type     | Default  | Description                                                                       |
| :---------------- | :------- | :------- | :-------------------------------------------------------------------------------- |
| autoStart         | boolean  | false    | Set `true` to auto start animation after render.                                  |
| bindMethod        | function |          | Method binding callback function, see [Bind Methods](#bind-methods).              |
| mouseEnterTrigger | string   |          | Event trigger type when mouse enter, one of `start`, `pause`, `reset`, `restart`. |
| mouseLeaveTrigger | string   |          | Event trigger type when mouse leave, one of `start`, `pause`, `reset`, `restart`. |
| noBreakSpace      | boolean  | true     | Using no-break space or not.                                                      |
| preScramble       | boolean  | false    | Scramble the text after render.                                                   |
| speed             | string   | `medium` | Speed of scramble per second, one of `slow`, `mediun`, `fast`.                    |
| steps             | array    |          | Scramble steps, a list of `Object` in [Step](#step-format) format.                |
| text              | string   |          | Original text.                                                                    |

## Bind Methods

Give callback function to `bindMethod` to get the control methods of the scramble, for example

```javascript
class ScrambleCommon extends React.Component {
  render() {
    return (
      <div>
        <Scramble
          text="Nor aware of gain"
          bindMethod={c => {
            this.setState({
              start: c.start,
              pause: c.pause,
            })
          }}
          steps={[
            {
              roll: 10,
              action: '+',
              type: 'all',
            },
            {
              action: '-',
              type: 'forward',
            },
          ]}
        />
        <button onClick={() => this.state.start()}>
          Start
        </button>
        <button onClick={() => this.state.pause()}>
          Pause
        </button>
      </div>
    )
  }
}
```

methods will be set into state after Scramble component mounted.

It has the following methods: `start`, `pause`, `reset` and `restart`.

## Todo

- [ ] Accept customize speed by giving number
- [ ] Make random decramble fit roll
- [ ] More action type
- [ ] Options for random char pool

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