A React component for creating playable in-browser Bingo games. You know the kind I mean -- like on Oscar night? or during a Presidential debate?
A very vanilla game of Bingo:
import React from 'react';
import ReactDOM from 'react-dom';
import Bingo from 'bingo-board';
const phrases = [ /* your list of phrases -- try to give it at least 30 */ ];
ReactDOM.render(
<React.StrictMode>
<Bingo phrases={phrases} />
</React.StrictMode>,
document.getElementById('root')
);
This will:
- The
<Bingo>
component will create your standard 5 × 5 grid - Internally,
getBingoPhrases
will randomly select 24 items fromphrases
- ...and then stick
FREE
in the middle.
And that's it! Load it in your browser and click away to play.
Let's say one of your phrases was :fun:
and you wanted to style the text larger
and in a specific color. You can add a squareClassResolver
function for that.
Let's revisit our vanilla example:
import Bingo, { squareClassResolver } from 'bingo-board';
const phrases = [ ':fun:', /* and 30 more */ ];
const customSquareClassResolver = (phrase) => {
// In this example, we want to keep the default styling for the 'FREE' square
let cssClass = squareClassResolver(phrase);
if (phrase === ':fun:') {
cssClass = `${cssClass} fun-style`;
}
return cssClass.trim();
};
ReactDOM.render(
<React.StrictMode>
<Bingo
phrases={phrases}
squareClassResolver={customSquareClassResolver}
/>
</React.StrictMode>,
document.getElementById('root')
);
Here we get our Bingo board as before, but now we'll apply the fun-style
CSS
class to the square that gets the :fun:
phrase. (I'll leave the actual CSS up
to you.)
The main component. It takes the following props:
phrases
(required) -- An array of strings that it uses to fill out the board; internally, the component usesgetBingoPhrases
to randomize the list and add theFREE
spacefreeSquare
(optional) -- A string to use for the center 'FREE' square; this will beFREE
if not providedsquareClassResolver
(optional) -- A function applied to each phrase that will output a CSS class for the square its in; use it to grant custom styles to each square
Given a string, return a string to be applied as a CSS class to a square on the
Bingo board. The library's default implementation returns free-square
for the
FREE
square phrase, and an empty string for everything else.
In the project directory, you can run:
Run those tests.
Compiles the TypeScript into the dist
folder and also copies the base CSS for the component.
N.b., This is run as part of the continuous delivery script in the GitHub
workflow. Do not commit to the dist
directory unless you know what you're
doing.