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

Props	Type	Default	Required	Detail
tree	TreeNode undefined	undefined	false	Treege data
variant	"standard" "stepper"	"stepper"	false	The variant to use
theme	"light" "dark" ThemeOptions	"light"	false	Theme color mode
onSubmit	data: JsonFormValue[]; formData: [string, FormDataEntryValue][]; fieldValues: FieldValues;	undefined	false	Callback fired form is validate
options	"countryAutocompleteService" "googleApiKey" "prefixResponseImageUriAutocomplete"	undefined	false	Consumer options
style	CSSProperties	undefined	false	Custom form style
initialValues	{ [key: string]: unknown; }	undefined	false	Set initial value to form
ignoreFields	string[]	undefined	false	Ignored fiels to render
debug	boolean	undefined	false	Debug in console on form submit

Options

Options	Type	Default	Required	Detail
countryAutocompleteService	string	"fr"	false	Define country restrictions for autocomplete
googleApiKey	string		false	If you want use some google service like autocomplete address, then you want provide Google Api Key
prefixResponseImageUriAutocomplete	string		false	Prefix response image uri for autocomplete image
licenseMuiX	string		false	License MUI X to enable pro and premium feature
disablePastDatePicker	boolean		false	Disable past for date picker
disablePastDateRangePicker	boolean		false	Disable past for date range picker

TreegeConsumerResponse

Render values from form based on Treege

Props	Type	Default	Required	Detail
values	{ label: string; name: string; type: string; tag?: string; value: string; | { label: string; value: string } }	undefined	true	Object of data
renderInputs	function(input: JsonFormValue): ReactElement | undefined	undefined	false	Custom inputs rendering
ignoreFields	string[]	undefined	false	Ignored fiels to render

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;