treege-consumer v1.42.0

Treege consumer

A React library to consume easily form generated from Treege

• Installation
• Usage
  • Provide tree data
  • Provide options
• Components
  • TreegeConsumer
  • TreegeConsumerResponse

Installation

npm:

npm install treege-consumer

bun:

bun add treege-consumer

yarn:

yarn add treege-consumer

pnpm:

pnpm add treege-consumer

Usage

Provide tree data

Give tree data to <TreegeForm> component.
Data can be fetched from your API.

import tree from "./tree.json";
import { TreegeConsumer } from "treege-consumer ";

const App = () => {
  const handleSubmit = (data: [string, FormDataEntryValue][]) => {
    console.log(data);
  };

  return <TreegeConsumer tree={tree} onSubmit={handleSubmit}/>;
};

export default App;

Provide options

Some options can be provided. For example if you want to use place predictions from address field.

import tree from "./tree.json";
import { TreegeConsumer } from "treege-consumer ";

const App = () => {
  const handleSubmit = (data: [string, FormDataEntryValue][]) => {
    console.log(data);
  };

  return (
    <TreegeConsumer
      tree={tree}
      variant={variant}
      onSubmit={handleSubmit}
      options={{ googleApiKey: "YOUR_API_KEY" }}/>
  );
};

export default App;

Components

TreegeConsumer

Render a form based on Treege data

Options

TreegeConsumerResponse

Render values from form based on Treege

Provider

Provide options

You can provide options to the consumer by using the TreegeConsumerProvider provider.

import tree from "./tree.json";
import { TreegeConsumer, TreegeConsumerProvider } from "treege-consumer ";

const App = () => {
  const handleSubmit = (data: [string, FormDataEntryValue][]) => {
    console.log(data);
  };

  return (
    <TreegeConsumerProvider licenseMuiX={"YOUR_LICENCE"}>
      <TreegeConsumer
        tree={tree}
        variant={variant}
        onSubmit={handleSubmit}
        options={{googleApiKey: "YOUR_API_KEY"}}/>
    </TreegeConsumerProvider>
  );
};

export default App;