react-scramble
v0.5.1
<h1 align="center"> <br> <img width="600" src="media/banner.gif" alt="react-scramble"> <br> <br> <br> </h1>
0/weekUpdated 3 years agoMITUnpacked: 22.1 KB
Published by cettoana
npm install react-scramble
React component for text scramble animation.
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 (
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. |all
| roll | number | | Times of action in the step. |
| text | string | | Change the original text. |
| type | string | | 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. |start
| bindMethod | function | | Method binding callback function, see Bind Methods. |
| mouseEnterTrigger | string | | Event trigger type when mouse enter, one of , pause, reset, restart. |start
| mouseLeaveTrigger | string | | Event trigger type when mouse leave, one of , pause, reset, restart. |medium
| noBreakSpace | boolean | true | Using no-break space or not. |
| preScramble | boolean | false | Scramble the text after render. |
| speed | string | | Speed of scramble per second, one of slow, mediun, fast. |Object
| steps | array | | Scramble steps, a list of in Step 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 (
bindMethod={c => {
this.setState({
start: c.start,
pause: c.pause,
})
}}
steps={[
{
roll: 10,
action: '+',
type: 'all',
},
{
action: '-',
type: 'forward',
},
]}
/>
)
}
}
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