react-random-slot-machine

The library provides reactive slot machine components.
Insert the desired item using props into the component and receive the result of the slot machine.

Table of contents

• react-random-slot-machine
  • Table of contents
  • Installation
  • Usage
  • Authors
  • License

Installation

To install and set up the library, run:

$ npm install react-random-slot-machine

Or if you prefer using Yarn:

$ yarn add react-random-slot-machine

Usage

Example

import { SlotMachine } from "react-random-slot-machine";

const feelingArr = [
  {
    id: 0,
    img: <img src="#" alt="image" />,
    name: "JOY",
    value: "joy",
  },
  {
    id: 1,
    img: <img src="#" alt="image" />,
    name: "SAD",
    value: "sad",
  },
];

const App: React.FC = () => {
  const result = (resultArr: string[]) => {
    console.log(resultArr);
  };

  return (
    <div>
      <SlotMachine
        firstList={feelingArr}
        secondList={feelingArr}
        thirdList={feelingArr}
        resultToParams={result}
      />
    </div>
  );
};

parameter

• firstList, secondList, thirdList:

    // id is for indexing
    // insert item into img with ReactNode type
    // name is shown under the img item in slot machine
    // value is return value
    itemList: {id: number, img: React.ReactNode, name?: string, value: string}

• resultToParams:

    // result will receive to parameter
    resultToParams: (resultArr: Array<string>) => void;

Example Images

Authors

• Sangwon Kang - github

License

MIT License