treege-consumer

Treege consumer

A React library to consume easily form generated from Treege

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

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}
      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	false	Treege data
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 fields to render
debug	boolean	undefined	false	Debug in console on form submit
readOnly	boolean	undefined	false	Read only mode
disabledSubmitButton	boolean	undefined	false	Disable submit button
isSubmitting	boolean	undefined	false	Disable submit button while submitting
renderFormValidation	function({ disabled, isLoading }: RenderFormValidationParams): ReactElement	undefined	false	Custom form validation renderer

Options

Options	Type	Default	Required	Detail
countryAutocompleteService	string or string[]		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
adapterLocale	string		false	Adapter local for locale format
disablePastDateRangePicker	boolean		false	Disable past for date range picker
disablePastDatePicker	boolean		false	Disable past for date picker
noValidate	boolean		false	Indicate that the form is not to be validated on submit

TreegeViewer

Display 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
renderFields	function(input: JsonFormValue): ReactElement | undefined	undefined	false	Custom fields rendering
excludedFields	string[]	undefined	false	Excluded fields
collapse	boolean	undefined	false	Enable collapse or note
collapseVisibleItemNumber	number	4	false	Number of visible item before collapse. Works only if collapse is true
collapseStyle	CSSProperties	undefined	false	Custom collapse style
collapseSx	SxProps	undefined	false	Custom collapse sx
style	CSSProperties	undefined	false	Container style
sx	SxProps	undefined	false	Container sx

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}
        onSubmit={handleSubmit}
        options={{googleApiKey: "YOUR_API_KEY"}}/>
    </TreegeConsumerProvider>
  );
};

export default App;

Type Definitions

This library uses type definitions from @tracktor/types-treege