react-randomizer-component

By: Jaymar921

A simple Randomizer Component for react projects that can be used for raffle events. With animated scrolling effect 📜. There is also a TextLoop component which might be useful to some projects.

Installation

npm i @jaymar921/react-randomizer-component

Demo

Live Website

Component

Randomizer

Props	Description	default
backgroundColor	Change the background color of the Randomizer Container that matches your site's background.	white
textColor	Change the text color of the randomizer (shuffling text).	black
winnerTextColor	Change the text color of the randomizer (winner text shown).	black
command	Randomizer Command, start command will start the shuffle effect, clear command will clear the screen and ready for reshuffle, reset command reset's the items list back to original.	empty string
items	List<string>, data that will be used for shuffling.	[]
duration	The duration of the shuffling effect before a winner is drawn.	1000 in milliseconds
completeCallback	Invoked when a winner is selected, it will pass a parameter of string, once a winner is selected, the items list will be modified, removing the selected winner in the array.	(winner) => { /* your logic goes here */}
fontWeight	Change the weight of the font.	0
textSize	Size of the Randomizer Text in pixels.	20
containerWidth	Change the width of the Randomizer Div Container.	300
containerHeight	Change the height of the Randomizer Div Container.	100
className	Custom className style for the Randomizer Div Container.	empty string
speed	Change the speed of the animation.	8

TextLoop

Props	Description	default
backgroundColor	Change the background color of the Randomizer Container that matches your site's background.	white
textColor	Change the text color of the randomizer (shuffling text).	black
items	List<string>, data that will be used for text looping.	[]
fontWeight	Change the weight of the font.	0
textSize	Size of the Randomizer Text in pixels.	20
containerWidth	Change the width of the Randomizer Div Container.	300
containerHeight	Change the height of the Randomizer Div Container.	100
className	Custom className style for the Randomizer Div Container.	empty string
speed	Change the speed of the animation.	3
reverse	Reverse the looping effect from top->down to down->top	false
smoothEdges	Have a smooth edge effect, the color will be matched to the backgroundColor	false

How to use

Randomizer

// app.jsx
import { useState } from 'react'
import './App.css'
import { Randomizer } from '@jaymar921/react-randomizer-component'

function App() {
  const list = ['Jayharron', 'Rodney', 'Kenneth', 'Ada', 'Neal', 'Alyssa', 'Jhon Mark', 'Bo', 'Harold Inacay', 'Harold Cuico', 'Xerxes', 'Raph', 'CJ', 'Dylan'];
  const [command, setCommand] = useState('');

  const onDone = (w) => {
    console.log(w);
  }
  return (
    <>
      <Randomizer 
        backgroundColor='#17A14B' /* Change the Background color of the randomizer */
        textColor='white'         /* Change the Text color of the randomizer (shuffling part) */
        winnerTextColor='red'     /* Change the Text color of the randomizer (winner displayed) */
        command={command}         /* Randomizer command (start, reset, clear) */
        items={list}              /* List of items to be shuffled (array of string) */
        duration={2000}           /* How long will be the shuffling to effect before displaying the winner */
        completeCallback={onDone} /* Invoked when a winner is selected, (winner) => { // your logic }*/
        fontWeight={900}          /* Weight of the font 0 - 900         | default: 0 */ 
        textSize={50}             /* Size of text in pixels             | default: 20 */
        containerWidth={500}      /* Width of the Randomizer container  | default: 300 */
        containerHeight={300}     /* Height of the Randomizer container | default: 100 */
        className=''              /* Custom className style for the Randomizer container */
        />        
      <div>
        <br /> <br />
        <button onClick={() => {setCommand('start')}}>Start</button>
        <button onClick={() => {setCommand('clear')}}>Clear</button>
        <button onClick={() => {setCommand('reset')}}>Reset</button>
      </div>
    </>
  )
}

export default App

TextLoop

// app.jsx
import { useState } from 'react'
import './App.css'
import { TextLoop } from '@jaymar921/react-randomizer-component'

function App() {
  const list = ['Jayharron', 'Rodney', 'Kenneth', 'Ada', 'Neal', 'Alyssa', 'Jhon Mark', 'Bo', 'Harold Inacay', 'Harold Cuico', 'Xerxes', 'Raph', 'CJ', 'Dylan'];

  return (
    <>
      <TextLoop 
        items={list}              /* List of items to be looped (array of string, supports <a href=''>string</a>) */
        containerWidth={500}      /* Width of the Randomizer container  | default: 300 */
        containerHeight={300}     /* Height of the Randomizer container | default: 100 */
        />        
      <div>
    </>
  )
}

export default App

Issues / Contribute

Github repo: react-randomizer-component