react-shuffle-array v1.0.2

Demo

On every refresh it shuffle

Description

A lightweight React hook for shuffling arrays in just 2 lines of code. Easily add randomness to your application by rearranging elements with a simple function call.

Installation

Install with npm

  npm i react-shuffle-array

Usage

import { useShuffle } from "react-shuffle-array";

function App() {
  const Fruits = [
    "Apple",
    "Banana",
    "Orange",
    "Grapes",
    "Mango",
    "Strawberry",
    "Pineapple",
    "Watermelon",
    "Pomegranate",
  ];

  const newArray = useShuffle({ array: Fruits });
  console.log(newArray);

  return <Component />;
}

Example

import React from "react";
import { useShuffle } from "react-shuffle-array";

const App = () => {
  const Fruits = [
    "Apple",
    "Banana",
    "Orange",
    "Grapes",
    "Mango",
    "Strawberry",
    "Pineapple",
    "Watermelon",
    "Pomegranate",
  ];

  const FruitsDup = [...Fruits];

  const newArray = useShuffle({ array: FruitsDup });
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 60,
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          gap: 30,
        }}
      >
        <p style={{ fontSize: "30px", fontWeight: "bold", color: "blue" }}>
          Before Shuffle
        </p>
        <div style={{ display: "flex", flexDirection: "row", gap: 40 }}>
          {Fruits?.map((fruit, index) => (
            <h4 key={index}>{fruit}</h4>
          ))}
        </div>
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          gap: 30,
        }}
      >
        <p style={{ fontSize: "30px", fontWeight: "bold", color: "blue" }}>
          After Shuffle
        </p>
        <div style={{ display: "flex", flexDirection: "row", gap: 40 }}>
          {newArray?.map((fruit, index) => (
            <h4 key={index}>{fruit}</h4>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;
}