react-life-game

React life game

A React component that renders "Conway's Game of Life".

Installation

npm:

$ npm install react-life-game

yarn:

$ yarn add react-life-game

Usage

import { LifeGameField } from 'react-life-game';

function App() {
  return (
    <LifeGameField
      option={
        {
          /* option here */
        }
      }
    />
  );
}

Playground

CodeSandBox

option

option	type	description	default
initialAliveRatio	number	Ratio of living cells in the initial state ([0,1])	0.12
interval	number	Time per each generation ([ms])	1000
aliveColor	string	Color of living cells ( can be any color that "css" can accept. i.e. blue, #1e3a8a, ... )	#1e3a8a
deadColor	string	Color of dead cells ( can be any color that "css" can accept. i.e. blue, #1e3a8a, ... )	#0f172b
cellSize	number	Size of cell ([px])	12
width	number	Width of the field of game of life	window.innerWidth
height	numer	Height of the field of game of life	window.innerHeight

tips

Re-render on window resize

By default, this component is not resizable. To support window resize, you need to use key prop for this component generated by useKeyOnResize hook.

import { LifeGameField, useKeyOnResize } from 'react-life-game';

function App() {
  const { key } = useKeyOnResize();
  return <LifeGameField key={key} option={{...}} />;
}