React-text-scrambler NPM

react-text-scrambler

Version License

React components for text animation.

Installation

Install from npm:

npm install react-text-scrambler

The UMD build is available on unpkg.

http://unpkg.com/react-text-scrambler@latest/dist/latest.js

Usage

Import the components:

import { Scrambler, Cycler } from "react-text-scrambler";

`Scrambler`

The Scrambler receives the text to be scrambled as a prop. It scrambles text only once.

<Scrambler text="This text will be scrambled!" />

Prop	Default Value
`children`	`""`	(Deprecated: removal in 2.0.0) A string of text to scramble.
`text`	`""`	Specify text to scramble. If no text is provided in this prop, any string in the `children` prop is used as the fallback text.
`characters`	`"+/\\_-"`	Characters to be randomly included in each scramble (only if `typewriter` is `false`).
`typewriter`	`false`	If `true`, instead of scrambling characters, text appears like typing.
`renderIn`	`3000`	The `Scrambler` will complete scrambling in the provided time in milliseconds.
`changeFrom`	`""`	The Scrambler will scramble text provided in this prop to the string provided in `text`.
`wrap`	`undefined`	Scrambled characters are wrapped in a provided `Wrap` component. Style scrambled characters as you see fit!

`Cycler`

The Cycler renders Scramblers in a specified interval. It automatically passes the changeFrom prop to the Scrambler for the next string in queue to create seamless transitions between scrambles.

If typewriter is true, empty strings, "" are inserted in between each string in strings to simulate backspacing and typing.

Prop	Default Value
`typewriter`	`false`	Passed to `Scrambler`s `typewriter` prop.
`duration`	`3000`	The duration of each `Scrambler`.
`strings`	`[]`	An array of strings to scramble.
`characters`	`undefined`	A string of characters to scramble with. If `undefined`, `Scrambler` will use its default `characters` value.

Examples

Typing animation

Just set the typewriter prop to true.

const MyComponent = props => {
    ...

    return (
        <Scrambler text="This text will be typed out!" typewriter />
    );
};

Characters provided

In this case, only the character * has the chance to replace characters during a scramble.

const MyComponent = props => {
    ...

    const characters = "*";

    return (
        <Scrambler
            text="This text will be typed out!"
            characters={ characters } />
    );
};

Cycle between text

A new string will be displayed every 4 seconds in the following Cycler.

const MyComponent = props => {
    ...

    const strings = ["These", "Strings", "Are", "Cycled!"];

    return (
        <Cycler
            duration={ 4000 }
            strings={ strings } />
    );
};

Wrap Scrambled Characters

For more customization, scrambled characters can be wrapped in a React component passed through the wrap prop.

const GrayText = props => (
    <span style="color: #cccccc;">{ props.children }</span>
);

...

const MyScrambledText = () => (
    <Scrambler
        text="Some more text. This is a lot of text!!"
        wrap={ GrayText } />
);

TODOs

More Props: More props for the user to configure the Scrambler.
- Minimum duration (in frames) to display each scrambled character.
- Control over the probability that a character is scrambled.

@everything-registry/sub-chunk-2617

2.0.0-alpha.0

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago