{"id":22903967,"url":"https://github.com/tracktor/treege-consumer","last_synced_at":"2025-05-08T17:05:08.440Z","repository":{"id":58650364,"uuid":"527325942","full_name":"Tracktor/treege-consumer","owner":"Tracktor","description":"A React library to consume easily form generated from Treege","archived":false,"fork":false,"pushed_at":"2025-04-10T17:40:47.000Z","size":2014,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T17:04:54.599Z","etag":null,"topics":["javascript","react","tree","treege","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tracktor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-08-21T21:02:00.000Z","updated_at":"2025-04-10T17:40:51.000Z","dependencies_parsed_at":"2023-12-14T13:28:21.176Z","dependency_job_id":"5bd82939-75e9-4abd-b0e1-d734a56a1e9a","html_url":"https://github.com/Tracktor/treege-consumer","commit_stats":{"total_commits":414,"total_committers":6,"mean_commits":69.0,"dds":0.5,"last_synced_commit":"bea536b8dedc2399f41d1e68b9796f3c436fef1e"},"previous_names":[],"tags_count":134,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tracktor%2Ftreege-consumer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tracktor%2Ftreege-consumer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tracktor%2Ftreege-consumer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tracktor%2Ftreege-consumer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tracktor","download_url":"https://codeload.github.com/Tracktor/treege-consumer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253112072,"owners_count":21856070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","tree","treege","typescript"],"created_at":"2024-12-14T02:39:35.619Z","updated_at":"2025-05-08T17:05:08.399Z","avatar_url":"https://github.com/Tracktor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Treege consumer\n\n[![npm version](https://badge.fury.io/js/treege-consumer.svg)](https://badge.fury.io/js/treege-consumer)\n\n**A React library to consume easily form generated from [Treege](https://github.com/Tracktor/treege)**\n\n- [Installation](#Installation)\n- [Usage](#Usage)\n  - [Provide tree data](#Provide-tree-data)\n  - [Provide options](#Provide-options)\n- [Components](#Components)\n  - [TreegeConsumer](#TreegeConsumer)\n  - [TreegeViewer](#TreegeViewer)\n\n## Installation\n\n**npm:**\n```bash\nnpm install treege-consumer\n```\n**bun:**\n```bash\nbun add treege-consumer\n```\n**yarn**:\n```bash\nyarn add treege-consumer\n```\n**pnpm**:\n```bash\npnpm add treege-consumer\n```\n\n## Usage\n\n### Provide tree data\n\nGive `tree data` to `\u003cTreegeForm\u003e` component.  \nData can be fetched from your API.\n\n```typescript jsx\nimport tree from \"./tree.json\";\nimport { TreegeConsumer } from \"treege-consumer \";\n\nconst App = () =\u003e {\n  const handleSubmit = (data: [string, FormDataEntryValue][]) =\u003e {\n    console.log(data);\n  };\n\n  return \u003cTreegeConsumer tree={tree} onSubmit={handleSubmit}/\u003e;\n};\n\nexport default App;\n```\n\n### Provide options\n\nSome options can be provided. For example if you want to use place predictions from `address` field.\n\n```typescript jsx\nimport tree from \"./tree.json\";\nimport { TreegeConsumer } from \"treege-consumer \";\n\nconst App = () =\u003e {\n  const handleSubmit = (data: [string, FormDataEntryValue][]) =\u003e {\n    console.log(data);\n  };\n\n  return (\n    \u003cTreegeConsumer\n      tree={tree}\n      onSubmit={handleSubmit}\n      options={{ googleApiKey: \"YOUR_API_KEY\" }}/\u003e\n  );\n};\n\nexport default App;\n```\n\n## Components\n\n### TreegeConsumer\n\nRender a form based\non [Treege](https://github.com/Tracktor/treege) data\n\n| Props                | Type                                                                                                                   | Default   | Required | Detail                                 |\n|----------------------|------------------------------------------------------------------------------------------------------------------------|-----------|----------|----------------------------------------|\n| tree                 | [TreeNode](src/types/TreeNode.ts)                                                                                      | undefined | false    | Treege data                            |\n| theme                | \"light\"\u003cbr/\u003e  \"dark\" \u003cbr/\u003e ThemeOptions                                                                                | \"light\"   | false    | Theme color mode                       |\n| onSubmit             | `data: JsonFormValue[];`\u003cbr/\u003e`formData: [string, FormDataEntryValue][];`\u003cbr/\u003e`fieldValues: FieldValues;`               | undefined | false    | Callback fired form is validate        |\n| options              | \"countryAutocompleteService\"\u003cbr/\u003e\"googleApiKey\" \u003cbr/\u003e\"prefixResponseImageUriAutocomplete\"                              | undefined | false    | Consumer options                       |\n| style                | CSSProperties                                                                                                          | undefined | false    | Custom form style                      |\n| initialValues        | { [key: string]: unknown; }                                                                                            | undefined | false    | Set initial value to form              |\n| ignoreFields         | string[]                                                                                                               | undefined | false    | Ignored fields to render               |\n| debug                | boolean                                                                                                                | undefined | false    | Debug in console on form submit        |\n| readOnly             | boolean                                                                                                                | undefined | false    | Read only mode                         |\n| disabledSubmitButton | boolean                                                                                                                | undefined | false    | Disable submit button                  |\n| isSubmitting         | boolean                                                                                                                | undefined | false    | Disable submit button while submitting |\n| renderFormValidation | function({ disabled, isLoading }: [RenderFormValidationParams](src/types/RenderFormValidationParams.ts)): ReactElement | undefined | false    | Custom form validation renderer        |\n\n#### Options\n\n| Options                            | Type               | Default | Required | Detail                                                                                                                                                                        |\n|------------------------------------|--------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| countryAutocompleteService         | string or string[] |         | false    | Define country restrictions for autocomplete                                                                                                                                  |\n| googleApiKey                       | string             |         | false    | If you want use some google service like \u003cstrong\u003eautocomplete address\u003c/strong\u003e, then you want provide [Google Api Key](https://cloud.google.com/docs/authentication/api-keys) |\n| prefixResponseImageUriAutocomplete | string             |         | false    | Prefix response image uri for autocomplete image                                                                                                                              |\n| licenseMuiX                        | string             |         | false    | License MUI X to enable pro and premium feature                                                                                                                               |\n| adapterLocale                      | string             |         | false    | Adapter local for locale format                                                                                                                                               |\n| disablePastDateRangePicker         | boolean            |         | false    | Disable past for date range picker                                                                                                                                            |\n| disablePastDatePicker              | boolean            |         | false    | Disable past for date picker                                                                                                                                                  |\n| noValidate                         | boolean            |         | false    | Indicate that the form is not to be validated on submit                                                                                                                       |\n\n\n### TreegeViewer\n\nDisplay values from form based on [Treege](https://github.com/Tracktor/treege)\n\n| Props                     | Type                                                                                                                                        | Default   | Required | Detail                                                                 |\n|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------|-----------|----------|------------------------------------------------------------------------|\n| values                    | {\u003cbr/\u003elabel: string;\u003cbr/\u003ename: string;\u003cbr/\u003etype: string;\u003cbr/\u003etag?: string;\u003cbr/\u003evalue: string; \u0026#124; { label: string; value: string }\u003cbr/\u003e} | undefined | true     | Object of data                                                         |\n| renderFields              | function(input: JsonFormValue): ReactElement \\| undefined                                                                                   | undefined | false    | Custom fields rendering                                                |\n| excludedFields            | string[]                                                                                                                                    | undefined | false    | Excluded fields                                                        |\n| collapse                  | boolean                                                                                                                                     | undefined | false    | Enable collapse or note                                                |\n| collapseVisibleItemNumber | number                                                                                                                                      | 4         | false    | Number of visible item before collapse. Works only if collapse is true |\n| collapseStyle             | CSSProperties                                                                                                                               | undefined | false    | Custom collapse style                                                  |\n| collapseSx                | SxProps                                                                                                                                     | undefined | false    | Custom collapse sx                                                     |\n| style                     | CSSProperties                                                                                                                               | undefined | false    | Container style                                                        |\n| sx                        | SxProps                                                                                                                                     | undefined | false    | Container sx                                                           |\n\n## Provider\n\n### Provide options\n\nYou can provide options to the consumer by using the `TreegeConsumerProvider` provider.\n\n```typescript jsx\nimport tree from \"./tree.json\";\nimport { TreegeConsumer, TreegeConsumerProvider } from \"treege-consumer \";\n\nconst App = () =\u003e {\n  const handleSubmit = (data: [string, FormDataEntryValue][]) =\u003e {\n    console.log(data);\n  };\n\n  return (\n    \u003cTreegeConsumerProvider licenseMuiX={\"YOUR_LICENCE\"}\u003e\n      \u003cTreegeConsumer\n        tree={tree}\n        onSubmit={handleSubmit}\n        options={{googleApiKey: \"YOUR_API_KEY\"}}/\u003e\n    \u003c/TreegeConsumerProvider\u003e\n  );\n};\n\nexport default App;\n```\n## Type Definitions\n\nThis library uses type definitions from [@tracktor/types-treege](https://www.npmjs.com/package/@tracktor/types-treege)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftracktor%2Ftreege-consumer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftracktor%2Ftreege-consumer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftracktor%2Ftreege-consumer/lists"}