react-shuffle-hook v1.1.3

Reack Shuffle

React shuffle allows you to shuffle any array using the unbiased shuffle algorithm by Fisher-Yates

Installation

To use react-shuffle-hook, install it with npm using the command:

npm install --save react-shuffle-hook

To use react-shuffle-hook, install it with yarn using the command:

yarn add react-shuffle-hook

Usage

To use this component, import useShuffle as a named import :

import { useShuffle } from 'react-shuffle-hook';

and then in your component function, you can use the hook to pass in any array, and react-shuffle will return the shuffled array.

import React from 'react';
import ReactDOM from 'react-dom';

import { useShuffle } from 'react-shuffle-hook';

import './styles.css';

function App() {
	const arrayNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
	// padd down the array to be shuffled and useShuffle returns a shuffled array
	const shuffled = useShuffle(arrayNumbers);

	return (
		<div style={{ textAlign: 'center' }}>
			<h1>React Shuffle Hook</h1>
			<h3>The array</h3>
			{/* map array to display */}
			{arrayNumbers.map((number, index) => (
				<p key={index} style={{ display: 'inline', padding: '5px' }}>
					{number}
				</p>
			))}
			<hr />
			<h3>The shuffled array</h3>
			{/* map array to display */}
			{shuffled.map((number, index) => (
				<p key={index} style={{ display: 'inline', padding: '5px' }}>
					{number}
				</p>
			))}
		</div>
	);
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);