{"id":13563400,"url":"https://github.com/oxyno-zeta/react-editable-json-tree","last_synced_at":"2026-03-04T23:03:17.888Z","repository":{"id":12613253,"uuid":"72131755","full_name":"oxyno-zeta/react-editable-json-tree","owner":"oxyno-zeta","description":"React Editable Json Tree","archived":false,"fork":false,"pushed_at":"2023-03-15T06:33:49.000Z","size":2505,"stargazers_count":113,"open_issues_count":11,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-02-16T22:37:43.206Z","etag":null,"topics":["editable","json-tree","react","reactjs"],"latest_commit_sha":null,"homepage":"https://oxyno-zeta.github.io/react-editable-json-tree/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oxyno-zeta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-10-27T17:27:32.000Z","updated_at":"2026-02-15T10:18:14.000Z","dependencies_parsed_at":"2024-01-16T18:59:50.774Z","dependency_job_id":"396a627c-3621-4e98-8a4a-dd0a0208271f","html_url":"https://github.com/oxyno-zeta/react-editable-json-tree","commit_stats":{"total_commits":270,"total_committers":3,"mean_commits":90.0,"dds":0.4,"last_synced_commit":"120756cede341aedc249b6f70335e4e9d718dda6"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/oxyno-zeta/react-editable-json-tree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxyno-zeta%2Freact-editable-json-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxyno-zeta%2Freact-editable-json-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxyno-zeta%2Freact-editable-json-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxyno-zeta%2Freact-editable-json-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oxyno-zeta","download_url":"https://codeload.github.com/oxyno-zeta/react-editable-json-tree/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxyno-zeta%2Freact-editable-json-tree/sbom","scorecard":{"id":716043,"data":{"date":"2025-08-11","repo":{"name":"github.com/oxyno-zeta/react-editable-json-tree","commit":"120756cede341aedc249b6f70335e4e9d718dda6"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":1,"reason":"Found 1/7 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/node.js.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/oxyno-zeta/react-editable-json-tree/node.js.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/oxyno-zeta/react-editable-json-tree/node.js.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"45 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-hpx4-r86g-5jrg","Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p","Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T09:41:28.320Z","repository_id":12613253,"created_at":"2025-08-22T09:41:28.320Z","updated_at":"2025-08-22T09:41:28.320Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30098106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T22:49:54.894Z","status":"ssl_error","status_checked_at":"2026-03-04T22:49:48.883Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["editable","json-tree","react","reactjs"],"created_at":"2024-08-01T13:01:18.798Z","updated_at":"2026-03-04T23:03:17.853Z","avatar_url":"https://github.com/oxyno-zeta.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Editable Json Tree\n\n[![Node.js CI](https://github.com/oxyno-zeta/react-editable-json-tree/actions/workflows/node.js.yml/badge.svg)](https://github.com/oxyno-zeta/react-editable-json-tree/actions/workflows/node.js.yml) [![npm](https://img.shields.io/npm/v/react-editable-json-tree.svg)](https://www.npmjs.com/package/react-editable-json-tree) [![Node version](https://img.shields.io/node/v/react-editable-json-tree)](https://nodejs.org) [![React version](https://img.shields.io/npm/dependency-version/react-editable-json-tree/peer/react)](https://reactjs.org/)\n\n## ⚠ Security advisory\n\nThis library was previously affected by an `eval` security vulnerability.\nWe have taken steps to mitigate this issue with non-breaking changes in this\npatch, v2.2.2, but for more info, please read\n[our security advisory](https://github.com/oxyno-zeta/react-editable-json-tree/security/advisories/GHSA-j3rv-w43q-f9x2).\n\nIf you do not have time to read and want to completely mitigate this issue,\nsimply set the [allowFunctionEvaluation](#allowfunctionevaluation)\nprop to `false`. In the next major version, we will set this value to `false` by\ndefault.\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Features](#features)\n- [How to use](#how-to-use)\n- [Props](#props)\n- [Design](#design)\n- [Development](#development)\n- [Inspired by](#inspired-by)\n- [Thanks](#thanks)\n- [Author](#author)\n- [License](#license)\n\n## Demo\n\nDemo is available here: [Demo](https://oxyno-zeta.github.io/react-editable-json-tree/)\n\n## Features\n\n- Json viewer\n- Collapse node conditionally via callback function\n- Add/remove/update node values\n- Implicit type inference of new values (`{}` for objects, `[]` for arrays,\n  `true` for booleans, etc.)\n- Style via callback function\n- Make entire structure read-only (or individual nodes, by callback function)\n- Callback on global and delta updates\n- Supply custom buttons, inputs, etc. via props\n- Ability to confirm add/remove/update actions\n\n## How to use\n\n### Install\n\n```bash\nnpm install react-editable-json-tree\n# or\nyarn add react-editable-json-tree\n```\n\n### Example Usage\n\n```jsx\n// Import\nimport {\n    JsonTree,\n    ADD_DELTA_TYPE,\n    REMOVE_DELTA_TYPE,\n    UPDATE_DELTA_TYPE,\n    DATA_TYPES,\n    INPUT_USAGE_TYPES,\n} from 'react-editable-json-tree'\n\n// Data\nconst data = {\n    error: new Error('error'),\n    text: 'text',\n    int: 100,\n    boolean: true,\n    null: null,\n    object: {\n        text: 'text',\n        int: 100,\n        boolean: true,\n    },\n    array: [\n        1,\n        {\n            string: 'test',\n        },\n    ],\n}\n\n// Component\n\u003cJsonTree data={data} /\u003e\n```\n\nHere is a screenshot of the result:\n\n![Screenshot](https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/.github/screen1.png)\n\n## Props\n\n### data\n\n| Key  |         Description         |              Type                | Required | Default |\n| :--: | :-------------------------: | :------------------------------: | :------: | :-----: |\n| data | Data to be displayed/edited | \u003ccode\u003eObject \u0026#124; Array\u003c/code\u003e |   True   |  None   |\n\n### rootName\n\n|   Key    |       Description       |   Type   | Required | Default |\n| :------: | :---------------------: | :------: | :------: | :-----: |\n| rootName | Name of the root object | `string` |  False   |  root   |\n\n### isCollapsed\n\n|     Key     |                      Description                       |    Type    | Required |              Default              |\n| :---------: | :----------------------------------------------------: | :--------: | :------: | :-------------------------------: |\n| isCollapsed | Whether the node is collapsed (for Array/Object/Error) | `Function` |  False   | `(keyPath, deep) =\u003e (deep !== 0)` |\n\nFunction parameters:\n\n|   Key   |          Description           |    Type    |                             Example                             |\n| :-----: | :----------------------------: | :--------: | :-------------------------------------------------------------: |\n| keyPath | Path to the current node/value | `string[]` |     `['object']` for data: `{ object: { string: 'test' } }`     |\n|  deep   |   Depth of the current node    |  `number`  | `1` for data: `{ object: { string: 'test' } }` on 'object' node |\n|  data   | Data of the current node/value | `unknown`  | `{ string: 'test' }` for data: `{ object: { string: 'test' } }` |\n\n### onFullyUpdate\n\n|      Key      |                                 Description                                  |    Type    | Required |  Default   |\n| :-----------: | :--------------------------------------------------------------------------: | :--------: | :------: | :--------: |\n| onFullyUpdate | Callback function called upon each update with the entire new data structure | `Function` |  False   | `() =\u003e {}` |\n\nFunction parameters:\n\n| Key  | Description  |                              Type                               |\n| :--: | :----------: | :-------------------------------------------------------------: |\n| data | Updated data | \u003ccode\u003eObject \u0026#124; Array\u003c/code\u003e (same type as the `data` prop) |\n\n### onDeltaUpdate\n\n|      Key      |                                  Description                                  |    Type    | Required |  Default   |\n| :-----------: | :---------------------------------------------------------------------------: | :--------: | :------: | :--------: |\n| onDeltaUpdate | Callback function called upon each update with only the data that has changed | `Function` |  False   | `() =\u003e {}` |\n\nFunction parameters:\n\n| Key  | Description |   Type   |\n| :--: | :---------: | :------: |\n| data | Delta data  | `Object` |\n\nDelta data structure:\n\n|   Key    |            Description            |    Type    |                               Example                               |\n| :------: | :-------------------------------: | :--------: | :-----------------------------------------------------------------: |\n|   type   |            Delta type             |  `string`  | `'ADD_DELTA_TYPE'`, `'REMOVE_DELTA_TYPE'`, or `'UPDATE_DELTA_TYPE'` |\n| keyPath  |  Path to the current node/value   | `string[]` |       `['object']` for data: `{ object: { string: 'test' } }`       |\n|   deep   |     Depth of the current node     |  `number`  |   `1` for data: `{ object: { string: 'test' } }` on 'object' node   |\n|   key    | Modified/created/removed key name |  `string`  |                                None                                 |\n| newValue |             New value             | `unknown`  |                                None                                 |\n| oldValue |             Old value             | `unknown`  |                                None                                 |\n\n### readOnly\n\n|   Key    |                                                                                    Description                                                                                    |                Type                  | Required |                       Default                       |\n| :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------: | :------: | :-------------------------------------------------: |\n| readOnly | If a boolean, whether the entire structure should be read-only. If a function, whether the node/value supplied to the function should be read-only (called for all nodes/values). | \u003ccode\u003eboolean \u0026#124; Function\u003c/code\u003e |  False   | `(keyName, data, keyPath, deep, dataType) =\u003e false` |\n\nThis function must return a boolean.\n\nFunction parameters:\n\n|   Key    |             Description             |    Type    |                                  Example                                   |\n| :------: | :---------------------------------: | :--------: | :------------------------------------------------------------------------: |\n| keyName  | Key name of the current node/value  |  `string`  |           `'object'` for data: `{ object: { string: 'test' } }`            |\n|   data   |   Data of the current node/value    | `unknown`  |      `{ string: 'test' }` for data: `{ object: { string: 'test' } }`       |\n| keyPath  |   Path to the current node/value    | `string[]` |          `['object']` for data: `{ object: { string: 'test' } }`           |\n|   deep   |      Depth of the current node      |  `number`  |      `1` for data: `{ object: { string: 'test' } }` on 'object' node       |\n| dataType | Data type of the current node/value |  `string`  | `'Object'`, `'Array'`, `'Null'`, `'Undefined'`, `'Error'`, `'Number'`, ... |\n\n### getStyle\n\n|   Key    |                               Description                               |    Type    | Required |                       Default                       |\n| :------: | :---------------------------------------------------------------------: | :--------: | :------: | :-------------------------------------------------: |\n| getStyle | Callback function which should return the CSS style for each node/value | `Function` |  False   | `(keyName, data, keyPath, deep, dataType) =\u003e {...}` |\n\nFunction parameters:\n\n|   Key    |             Description             |    Type    |                                  Example                                   |\n| :------: | :---------------------------------: | :--------: | :------------------------------------------------------------------------: |\n| keyName  | Key name of the current node/value  |  `string`  |           `'object'` for data: `{ object: { string: 'test' } }`            |\n|   data   |   data of the current node/value    | `unknown`  |      `{ string: 'test' }` for data: `{ object: { string: 'test' } }`       |\n| keyPath  |   Path to the current node/value    | `string[]` |          `['object']` for data: `{ object: { string: 'test' } }`           |\n|   deep   |      Depth of the current node      |  `number`  |      `1` for data: `{ object: { string: 'test' } }` on 'object' node       |\n| dataType | Data type of the current node/value |  `string`  | `'Object'`, `'Array'`, `'Null'`, `'Undefined'`, `'Error'`, `'Number'`, ... |\n\nAn example of return:\n\n```javascript\n{\n    minus: {\n        color: 'red',\n    },\n    plus: {\n        color: 'green',\n    },\n    collapsed: {\n        color: 'grey',\n    },\n    delimiter: {},\n    ul: {\n        padding: '0px',\n        margin: '0 0 0 25px',\n        listStyle: 'none',\n    },\n    name: {\n        color: '#2287CD',\n    },\n    addForm: {},\n}\n```\n\nYou can see the default style definitions in [`src/utils/styles.js`](https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/src/utils/styles.js).\n\n### addButtonElement\n\n|       Key        |                                 Description                                  |     Type      | Required |       Default        |\n| :--------------: | :--------------------------------------------------------------------------: | :-----------: | :------: | :------------------: |\n| addButtonElement | Custom add button element (to confirm adding a new value to an object/array) | `JSX.Element` |  False   | `\u003cbutton\u003e+\u003c/button\u003e` |\n\nThe library will add an `onClick` handler to the element.\n\n### cancelButtonElement\n\n|         Key         |                       Description                        |     Type      | Required |       Default        |\n| :-----------------: | :------------------------------------------------------: | :-----------: | :------: | :------------------: |\n| cancelButtonElement | Custom cancel button element (to cancel editing a value) | `JSX.Element` |  False   | `\u003cbutton\u003ec\u003c/button\u003e` |\n\nThe library will add an `onClick` handler to the element.\n\n### editButtonElement\n\n|        Key        |                      Description                       |     Type      | Required |       Default        |\n| :---------------: | :----------------------------------------------------: | :-----------: | :------: | :------------------: |\n| editButtonElement | Custom edit button element (to finish editing a value) | `JSX.Element` |  False   | `\u003cbutton\u003ee\u003c/button\u003e` |\n\nThe library will add an `onClick` handler to the element.\n\n### inputElement\n\n|     Key      |                 Description                 |                  Type                    | Required |                            Default                             |\n| :----------: | :-----------------------------------------: | :--------------------------------------: | :------: | :------------------------------------------------------------: |\n| inputElement | Custom text input element (to edit a value) | \u003ccode\u003eJSX.Element \u0026#124; Function\u003c/code\u003e |  False   | `(usage, keyPath, deep, keyName, data, dataType) =\u003e \u003cinput /\u003e` |\n\nThe library will add a `placeholder`, `ref`, and `defaultValue` prop to the\nelement. This element will be focused when possible.\n\nFunction parameters:\n\n|   Key    |          Description           |    Type    |                                                                    Example                                                                    |\n| :------: | :----------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------: |\n|  usage   |  Usage of the generated input  |  `string`  | All values are listed in [INPUT_USAGE_TYPES](https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/src/types/inputUsageTypes.js) |\n| keyPath  | Path to the current node/value | `string[]` |                                                `[]` for data: `{ object: { string: 'test' } }`                                                |\n|   deep   |   Depth of the current node    |  `number`  |                                        `1` for data: `{ object: { string: 'test' } }` on 'object' node                                        |\n|   key    | Key of the current node/value  |  `string`  |                                             `'object'` for data: `{ object: { string: 'test' } }`                                             |\n|  value   |        Value of the key        | `unknown`  |                               `{ string: 'test' }` for data: `{ object: { string: 'test' } }` on 'object' node                                |\n| dataType |     Data type of the value     |  `string`  |       All values are listed in [DATA_TYPES](https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/src/types/dataTypes.js)        |\n\n### textareaElement\n\n|       Key       |                          Description                           |                  Type                    | Required |                              Default                              |\n| :-------------: | :------------------------------------------------------------: | :--------------------------------------: | :------: | :---------------------------------------------------------------: |\n| textareaElement | Custom textarea element (to edit a long value, like functions) | \u003ccode\u003eJSX.Element \u0026#124; Function\u003c/code\u003e |  False   | `(usage, keyPath, deep, keyName, data, dataType) =\u003e \u003ctextarea /\u003e` |\n\nThe library will add a `ref` and `defaultValue` prop to the element. This\nelement will be focused when possible.\n\nFunction parameters:\n\n|   Key    |          Description           |    Type    |                                                                    Example                                                                    |\n| :------: | :----------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------: |\n|  usage   |  Usage of the generated input  |  `string`  | All values are listed in [INPUT_USAGE_TYPES](https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/src/types/inputUsageTypes.js) |\n| keyPath  | Path to the current node/value | `string[]` |                                                `[]` for data: `{ object: { string: 'test' } }`                                                |\n|   deep   |   Depth of the current node    |  `number`  |                                        `1` for data: `{ object: { string: 'test' } }` on 'object' node                                        |\n|   key    | Key of the current node/value  |  `string`  |                                             `'object'` for data: `{ object: { string: 'test' } }`                                             |\n|  value   |        Value of the key        | `unknown`  |                               `{ string: 'test' }` for data: `{ object: { string: 'test' } }` on 'object' node                                |\n| dataType |     Data type of the value     |  `string`  |       All values are listed in [DATA_TYPES](https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/src/types/dataTypes.js)        |\n\n### minusMenuElement\n\n|       Key        |                            Description                             |     Type      | Required |      Default       |\n| :--------------: | :----------------------------------------------------------------: | :-----------: | :------: | :----------------: |\n| minusMenuElement | Custom minus menu element (to remove a value from an object/array) | `JSX.Element` |  False   | `\u003cspan\u003e - \u003c/span\u003e` |\n\nThe library will add an `onClick`, `className`, and `style` prop to the element.\n\n### plusMenuElement\n\n|       Key       |                                Description                                |     Type      | Required |      Default       |\n| :-------------: | :-----------------------------------------------------------------------: | :-----------: | :------: | :----------------: |\n| plusMenuElement | Custom plus menu element (to begin adding a new value to an object/array) | `JSX.Element` |  False   | `\u003cspan\u003e + \u003c/span\u003e` |\n\nThe library will add an `onClick`, `className`, and `style` prop to the element.\n\n### beforeRemoveAction\n\n|        Key         |                                          Description                                          |    Type    | Required |                                Default                                |\n| :----------------: | :-------------------------------------------------------------------------------------------: | :--------: | :------: | :-------------------------------------------------------------------: |\n| beforeRemoveAction | Async function called upon the user trying to remove a node/value with the minus menu element | `Function` |  False   | `(key, keyPath, deep, oldValue) =\u003e new Promise(resolve =\u003e resolve())` |\n\nThis function must return a `Promise`. If the promise is resolved, the\nnode/value will be removed. Otherwise, if rejected, nothing will be done.\n\nFunction parameters:\n\n|   Key    |            Description             |    Type    |                                     Example                                      |\n| :------: | :--------------------------------: | :--------: | :------------------------------------------------------------------------------: |\n|   key    | Key name of the current node/value |  `string`  |              `'object'` for data: `{ object: { string: 'test' } }`               |\n| keyPath  |   Path to the current node/value   | `string[]` |                 `[]` for data: `{ object: { string: 'test' } }`                  |\n|   deep   |     Depth of the current node      |  `number`  |         `1` for data: `{ object: { string: 'test' } }` on 'object' node          |\n| oldValue |        Old value of the key        | `unknown`  | `{ string: 'test' }` for data: `{ object: { string: 'test' } }` on 'object' node |\n\n### beforeAddAction\n\n|       Key       |                                       Description                                        |    Type    | Required |                                Default                                |\n| :-------------: | :--------------------------------------------------------------------------------------: | :--------: | :------: | :-------------------------------------------------------------------: |\n| beforeAddAction | Async function called upon the user trying to add a node/value with the add menu element | `Function` |  False   | `(key, keyPath, deep, newValue) =\u003e new Promise(resolve =\u003e resolve())` |\n\nThis function must return a `Promise`. If the promise is resolved, the\nnode/value will be added. Otherwise, if rejected, nothing will be done.\n\nFunction parameters:\n\n|   Key    |          Description           |    Type    |                               Example                                |\n| :------: | :----------------------------: | :--------: | :------------------------------------------------------------------: |\n|   key    | Key of the current node/value  |  `string`  |        `'string'` for data: `{ object: { string: 'test' } }`         |\n| keyPath  | Path to the current node/value | `string[]` |       `['object']` for data: `{ object: { string: 'test' } }`        |\n|   deep   |   Depth of the current node    |  `number`  |   `1` for data: `{ object: { string: 'test' } }` on 'object' node    |\n| newValue |      New value of the key      | `unknown`  | `'test'` for data: `{ object: { string: 'test' } }` on 'string' node |\n\n### beforeUpdateAction\n\n|        Key         |                           Description                           |    Type    | Required |                                     Default                                     |\n| :----------------: | :-------------------------------------------------------------: | :--------: | :------: | :-----------------------------------------------------------------------------: |\n| beforeUpdateAction | Async function called upon the user trying to edit a node/value | `Function` |  False   | `(key, keyPath, deep, oldValue, newValue) =\u003e new Promise(resolve =\u003e resolve())` |\n\nThis function must return a `Promise`. If the promise is resolved, the\nnode/value will be updated. Otherwise, if rejected, nothing will be done.\n\nFunction parameters:\n\n|   Key    |          Description           |    Type    |                                 Example                                  |\n| :------: | :----------------------------: | :--------: | :----------------------------------------------------------------------: |\n|   key    | Key of the current node/value  |  `string`  |          `'string'` for data: `{ object: { string: 'test' } }`           |\n| keyPath  | Path to the current node/value | `string[]` |         `['object']` for data: `{ object: { string: 'test' } }`          |\n|   deep   |   Depth of the current node    |  `number`  |     `1` for data: `{ object: { string: 'test' } }` on 'object' node      |\n| oldValue |      Old value of the key      | `unknown`  |   `'test'` for data: `{ object: { string: 'test' } }` on 'string' node   |\n| newValue |      New value of the key      | `unknown`  | `'update'` for data: `{ object: { string: 'update' } }` on 'string' node |\n\n### logger\n\n|  Key   |                                 Description                                 |   Type   | Required |        Default        |\n| :----: | :-------------------------------------------------------------------------: | :------: | :------: | :-------------------: |\n| logger | Object used to log errors caught from promises (using only the 'error' key) | `Object` |  False   | `{ error: () =\u003e {} }` |\n\n### onSubmitValueParser\n\n|         Key         |                                                                  Description                                                                   |    Type    | Required |                                Default                                 |\n| :-----------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :--------: | :------: | :--------------------------------------------------------------------: |\n| onSubmitValueParser | Function called upon every value addition/update to parse raw string data from inputElements or textareaElements into the correct object types | `Function` |  False   | `(isEditMode, keyPath, deep, key, rawValue) =\u003e nativeParser(rawValue)` |\n\nFunction parameters:\n\n|    Key     |                                          Description                                          |    Type    |                             Example                             |\n| :--------: | :-------------------------------------------------------------------------------------------: | :--------: | :-------------------------------------------------------------: |\n| isEditMode | Whether the value is being edited on an existing node/value, otherwise it's being newly added | `boolean`  |                             `True`                              |\n|  keyPath   |                                Path to the current node/value                                 | `string[]` |     `['object']` for data: `{ object: { string: 'test' } }`     |\n|    deep    |                                   Depth of the current node                                   |  `number`  | `1` for data: `{ object: { string: 'test' } }` on 'object' node |\n|    key     |                                 Key of the current node/value                                 |  `string`  |      `'string'` for data: `{ object: { string: 'test' } }`      |\n|  rawValue  |                   Raw string value from the inputElement or textareaElement                   |  `string`  |       `'test'` for data: `{ object: { string: 'test' } }`       |\n\n### allowFunctionEvaluation\n\n|           Key           |                                               Description                                               |   Type    | Required | Default |\n| :---------------------: | :-----------------------------------------------------------------------------------------------------: | :-------: | :------: | :-----: |\n| allowFunctionEvaluation | Allow strings that appear to be Javascript function definitions to be evaluated as Javascript functions | `boolean` |  False   |  True   |\n\n## Design\n\nThe library assigns a CSS class to every element. All classes are prefixed with\n\"rejt\" to avoid name clashes. To avoid being linked with a CSS file, the\nlibrary itself uses inline styles.\n\nHere is the list of CSS classes, ordered by REJT element and depth, with the\ndefault HTML element on which each class is applied.\n\n### JsonTree\n\n- `rejt-tree` (div)\n\n### JsonObject\n\n#### Collapsed\n\n- `rejt-object-node` (div)\n  - `rejt-name` (span)\n  - `rejt-collapsed` (span)\n    - `rejt-collapsed-text` (span)\n    - `rejt-minus-menu` (span)\n\n#### Not Collapsed\n\n- `rejt-object-node` (div)\n  - `rejt-name` (span)\n  - `rejt-not-collapsed` (span)\n    - `rejt-not-collapsed-delimiter` (span)\n    - `rejt-not-collapsed-list` (ul)\n    - `rejt-not-collapsed-delimiter` (span)\n    - `rejt-add-form` (span)\n    - `rejt-plus-menu` (span)\n    - `rejt-minus-menu` (span)\n\n### JsonArray\n\n#### Collapsed\n\n- `rejt-array-node` (div)\n  - `rejt-name` (span)\n  - `rejt-collapsed` (span)\n    - `rejt-collapsed-text` (span)\n    - `rejt-minus-menu` (span)\n\n#### Not Collapsed\n\n- `rejt-array-node` (div)\n  - `rejt-name` (span)\n  - `rejt-not-collapsed` (span)\n    - `rejt-not-collapsed-delimiter` (span)\n    - `rejt-not-collapsed-list` (ul)\n    - `rejt-not-collapsed-delimiter` (span)\n    - `rejt-add-form` (span)\n    - `rejt-plus-menu` (span)\n    - `rejt-minus-menu` (span)\n\n### JsonAddValue\n\n- `rejt-add-value-node` (span)\n\n### JsonFunctionValue\n\n- `rejt-function-value-node` (li)\n  - `rejt-name` (span)\n  - `rejt-edit-form` (span)\n  - `rejt-value` (span)\n  - `rejt-minus-menu` (span)\n\n### JsonValue\n\n- `rejt-value-node` (li)\n  - `rejt-name` (span)\n  - `rejt-edit-form` (span)\n  - `rejt-value` (span)\n  - `rejt-minus-menu` (span)\n\n## Development\n\n### npm commands\n\n#### Build\n\nBuild the library to `dist/` using parcel.\n\n```bash\nnpm run build\n```\n\n#### Publish\n\nPublishes the library to npm. This runs a parcel build.\n\n```bash\nnpm publish\n```\n\n### Dev app\n\nWe have an app available in [`dev_app/`](./dev_app) to test this library in\nyour browser during development. We use [yalc](https://github.com/wclr/yalc)\nto build and link the REJT library inside this subpackage.\n\nIf you want to use this dev app, you must run the following command once to\ninitialize yalc:\n\n```sh\nnpm run yalcInit\n```\n\nThis will tell yalc to link `dev_app/` to the root REJT library (this link\nis usually stored in `~/.yalc/installations.json` if you're curious). After\ninitializing, you can run the following command in the root package every\ntime you make changes to REJT to push the changes to the dev app\n(with hot-loading!):\n\n```sh\nnpm run yalcPush\n```\n\nYou can run the dev app just like any old create-react-app application (make\nsure you're running this inside the `dev_app/` subpackage):\n\n```sh\nnpm start\n```\n\n## Inspired by\n\n- [alexkuz/react-json-tree](https://github.com/alexkuz/react-json-tree)\n- [krispo/json-tree](https://github.com/krispo/json-tree)\n\n## Thanks\n\n- My wife BH to support me doing this\n\n## Author\n\n- [Oxyno-zeta (Havrileck Alexandre)](https://github.com/oxyno-zeta)\n\n### Contributors\n\n- [Phanabani](https://github.com/Phanabani)\n\n## License\n\nMIT (see [License.md](https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/LICENSE.md)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foxyno-zeta%2Freact-editable-json-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foxyno-zeta%2Freact-editable-json-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foxyno-zeta%2Freact-editable-json-tree/lists"}