react-shuffle-array
v1.0.2
Published
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.
Downloads
14
Maintainers
Readme
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;
}