treege-consumer
v1.27.0
Published
A React library to consume easily form generated from Tree
Downloads
748
Maintainers
Readme
Treege consumer
A React library to consume easily form generated from Treege
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" | undefined | false | Consumer options |
| style | CSSProperties | undefined | false | Custom form style |
| initialValues | { [key: string]: unknown; } | undefined | false | Set initial value to form |
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 |
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 |