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 | 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 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 | | disablePastDatePicker | boolean | | false | Disable past for date picker | | disablePastDateRangePicker | boolean | | false | Disable past for date range picker | | adapterLocale | string | | false | Adapter local for locale format |

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 | | collapse | boolean | undefined | false | Enable collapse or note | | collapseVisibleItemNumber | number | 4 | false | Number of visible item before collapse. Works only if collapse is true | | disabledSubmitButton | boolean | undefined | false | Boolean to disable submit button |

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;