figtree-js

Figtree is a tiny React component that generates a component tree and manages its state, all from a static configuration file that looks like this:

{
  "as": "div",
  "children": [
    "Enter your name: ",
    {
      "as": "input",
      "value": { "$getState": ["bar"] },
      "onChange": { "$setState": ["bar"] }
    }
  ]
}

Motivation

Playground

• Basic Demo
• Realworld Demo

Installation

To install the latest stable version, run the following command:

npm install figtree-js

Or if you're using yarn:

yarn add figtree-js

Usage

import { Figtree } from "figtree-js";

const App = () => {
  return <Figtree entry={{ as: "div", children: "Hello World" }} />;
};

Features

Declare the component tree

Modify props

Reference elements

Reference custom React components

Manage state

Declare initial state

Make changes to state

Use custom functions

License

figtree-js is MIT licensed.