react-zalgo
A react component library with Configurable 'Zalgo Text' Generator.
Getting Started
Work in progress...
Documentation
You can try to use Sample from Storybook
more information will come soon...
Quick Start
1. Installation
$ npm i @h.yoshida/react-zalgo
# or
$ yarn add @h.yoshida/react-zalgo2. Using in React.
import {GlitchParams, Zalgo} from '@h.yoshida/react-zalgo';
const textData = 'the quick brown fox jumps over the lazy dog.'
// You can configure the amount of Zalgo Glitch volumes.
const param: GlitchParams = {
topGlitchAmount: () => Math.ceil(3 * Math.random()),
midGlitchAmount: () => Math.ceil(2 * Math.random()),
btmGlitchAmount: () => Math.ceil(10 * Math.random()),
}
// this will return like `ṱ̶̠͖̗̹͖̰̺͙̠ͬ͘h̶̠͖̥͇̗ͪͣͭe̵̹͓̘͍͌ͤ̓ ̤̺̦͏҉̄̂q̶̛̳̗͍͉̹̞̳͒ù̡̲̪̲͙̞͑̚͜ī̜̮̞̬̬̗̤̠͙͈ͩ͜c̞̦̝̝̰̠̔͡ͅk̰͇̦͌ͩ͟ ̵̺̺̞̲̱͍̲̺̟̓̅ͯ͘b̩͖̤͚͕̱̭ͦͪ͝r̪̩̣̝͇͖̼҉̧̊o̶͎͕̱̩̜̻͈̽͞w̧̢̘̳̭̹̘͉ͣ̒n͙͑̀͑͜͡ ͕̀̉f̢̹̼̻͎͙̲̿̑o̪̯̻͉̩̮̹͇҉҉͒̔x̘͎̭̐̆̐͝͠ ̷͑ͅj̷̧͉͇̰̹̰͓̦̭̊̈ụ̻̬̠͍̘͖̘͖̹̀̀̆̚m̸̤̙̬̻͍ͦ͞ͅp̡̡̤͚̪̤͓̯̗͖̬͊ṥ͖͖̠̫́̋ ̷̨̗̮̹̟̥͚̔o̝҉̌̓͝v̴̴̭̟̘̣̫͗e̡̛͎̘̩̠̳̯͉̦̬̟͐ͨr̙͔̙̪͏̴̃̚ ̡̺̰͍̘̱͙̣̞͖̰̎͘t̘ͨͯ͌͝h̩̮͈̙͎̦͍̻ͤͫ͠ẹ̳̞̪͈̼̮̪͉̜͏̎ ̡̢̙̔̈́l̥̗͉̦͈̝ͣ͂̇͟a̹̝͔̹͉̽̄͘z̨̥͙͇̞͔̟̰ͯ̎̏y̥̠̜̦҉̊̄ ̧̬͓̣ͦd̶̦͙́ͫ̈́ȍ̶̹̜͔͍̐͡g̶̤̗̮͚͖͚͛̒̈́͜ͅ.̼̹͈̣̪̪̙̘̣͏̡ͭ̅̿`
return (
<>
<Zalgo textData={textData}
glitchParams={param}/>
</>
)If you want to get reproducible glitch results, use XORShift32 to GlitchAmount.
import {DefaultXORShift32GeneratorFactory, GlitchParams, XORShift32, Zalgo} from '@h.yoshida/react-zalgo';
const rand = new XORShift32(100);
const param: GlitchParams = {
// these params control the amount of glitch volume.
topGlitchAmount: () => Math.ceil(3 * rand.getNextInt(1, 3)),
midGlitchAmount: () => Math.ceil(rand.getNextInt(0, 1)),
btmGlitchAmount: () => Math.ceil(2 * rand.getNextInt(3, 30)),
// `randomGeneratorFactory` is used by selecting charactor for zalgo glitch.
randomGeneratorFactory: DefaultXORShift32GeneratorFactory
}
// this gives the same glitch result.
return (
<>
<Zalgo textData={textData}
glitchParams={param}/>
</>
)and more sample will be found in Storybook
About Zalgo
- reference