React Bonsai

react-bonsai is a bonsai tree generator, written in react using typescript. It intelligently creates, colors, and positions a bonsai tree, and is entirely configurable -- see usage. There are 2 modes of operation: static (see finished bonsai tree), and live (see growth step-by-step).

Installation

cbonsai is available in npm. Check out the latest version here.

npm i react-bonsai

Usage

const config: BonsaiConfig = {
  /*...*/
};

const Component = () => (
  <div>
        <h1>My Bonsai</h1>
        <Bonsai config={config} />
  </div>
);

Configuration:

export type BonsaiConfig = {
  maxX?: number; //max width of the tree (default: 100)
  maxY?: number; //max height of the tree (default: 100)
  baseType?: 1 | 2; //ascii-art plant base to use, 0 is none (default: 1)
  lifeStart?: number; //life; higher -> more growth (default: 10)
  multiplier?: number; //branch multiplier; higher -> more branching (default: 5)
  seed?: string; //seed random number generator (default: "react-bonsai")
  leaves?: string[]; //list of comma-delimited strings randomly chosen for leaves (default: ["&", "0", "&&", "00", "&&&", "0&~", "&~&"])
  leafClassName?: string; //class name for the leaf (default: "bonsai-leaf")
  trunkClassName?: string; //class name for the trunk (default: "bonsai-trunk")
  emptyClassName?: string; //class name for the empty space (default: "bonsai-empty")
  growthInterval?: number; //interval for showing the tree (default: 5)
  containerClassName?: string; //class name for the container (default: "bonsai")
  emptySymbol?: string; //symbol for the empty space (default: " ")
  live?: boolean; //live mode: show each step of growth (default: false)
};

How it Works

react-bonsai ports over the homemade algorithm of cbonsai to decide how the tree should grow in every step. It generates the whole tree and then returns every position as a Cell that is then rendered using a span. Trees area always generated upfront and using livemode it just shows steps 1 at a time

Just like cbonsai the algorithm is tweaked to look best at the default size, so larger sized trees may not be as bonsai-like.

Inspiration

This project is a direct port of cbonsai which itself is a newer version of bonsai.sh, which was written in bash and was itself a port of this bonsai tree generator written in javascript.

We have come full circle