@jaymar921/react-randomizer-component v1.3.0

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

TextLoop

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