@huasi/text-shuffle

Install

``bash


with yarn

yarn add txt-shuffle

with pnpm

pnpm i @huasi/text-shuffle

with npm

npm i @huasi/text-shuffle
`

Usage

`js
import shuffle from '@huasi/text-shuffle';

shuffle({
text: 'Hello world! from Huasi.dev',
onUpdate: shuffleStr => {
console.log(shuffleStr);
},
onComplete: () => {
console.log('Shuffle complete!');
},
});
`

Props

$3

Text to shuffle.

| Type | Required | Default |
| ------ | -------- | ------- |
| string | true | '' |

$3

Animation duration in seconds.

| Type | Required | Default |
| ------ | -------- | ------- |
| number | false | 1 |

$3

Time to spend before starting the animation.

| Type | Required | Default |
| ------ | -------- | ------- |
| number | false | 0 |

$3

Time to spend to resolving the animation.

| Type | Required | Default |
| ------ | -------- | ------- |
| number | false | 0.2 |

$3

Frames per second.

| Type | Required | Default |
| ------ | -------- | ------- |
| number | false | 60 |

$3

String of characters to use in the shuffle animation

| Type | Required |
| ------ | -------- |
| string | false |

Default: ' !#$&%()*+0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_abcdefghijklmnopqrstuüvwxyz{|}~'

$3

Animation type, possible values: show, hide, stay

| Type | Required | Default |
| ------ | -------- | ------- |
| string | false | 'show' |

$3

Direction of the animation, possible values: left, right, random

| Type | Required | Default |
| ------ | -------- | ------- |
| string | false | 'left' |

Methods

$3

Callback function to be called on each frame of the animation.

`js
onUpdate = string => {
console.log(string);
};
`

$3

Callback function to be called when the animation is complete.

`js
onComplete = string => {
console.log('Shuffle complete!', string);
};
``

License

MIT, see LICENSE for details.

References

- eases - License
- canvas-sketch-util - License
- txt-shuffle - License