{"id":18730078,"url":"https://github.com/b-gran/object-editor-react","last_synced_at":"2025-04-10T00:17:41.780Z","repository":{"id":38984031,"uuid":"69040546","full_name":"b-gran/object-editor-react","owner":"b-gran","description":"Schema-aware editor for structured JSON objects (drop-in React component)","archived":false,"fork":false,"pushed_at":"2025-04-01T10:22:03.000Z","size":1217,"stargazers_count":125,"open_issues_count":17,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-10T00:17:35.143Z","etag":null,"topics":["component","editor","json","objects","react","schema"],"latest_commit_sha":null,"homepage":"https://b-gran.github.io/object-editor-react/githubExample.html","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/b-gran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2016-09-23T16:07:45.000Z","updated_at":"2025-01-19T13:37:17.000Z","dependencies_parsed_at":"2022-09-06T21:21:04.039Z","dependency_job_id":"639a3d61-f940-4b03-aaa3-704e3cfd3b33","html_url":"https://github.com/b-gran/object-editor-react","commit_stats":{"total_commits":164,"total_committers":6,"mean_commits":"27.333333333333332","dds":"0.10365853658536583","last_synced_commit":"72d1e9c7a95855d0444a8b4359a00cad22f5b890"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-gran%2Fobject-editor-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-gran%2Fobject-editor-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-gran%2Fobject-editor-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-gran%2Fobject-editor-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b-gran","download_url":"https://codeload.github.com/b-gran/object-editor-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131317,"owners_count":21052820,"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":["component","editor","json","objects","react","schema"],"created_at":"2024-11-07T14:34:39.702Z","updated_at":"2025-04-10T00:17:41.759Z","avatar_url":"https://github.com/b-gran.png","language":"JavaScript","readme":"# `object-editor-react`\n\n[![Build Status](https://travis-ci.org/b-gran/object-editor-react.svg?branch=master)](https://travis-ci.org/b-gran/object-editor-react) [![npm version](https://badge.fury.io/js/object-editor-react.svg)](https://badge.fury.io/js/object-editor-react) [![GitHub stars](https://img.shields.io/github/stars/b-gran/object-editor-react.svg?style=social\u0026label=Stars)](https://github.com/b-gran/object-editor-react)\n\n`object-editor-react` is a visual editor for structured JSON data, available as a simple drop-in React component.\n\n* 🔌 Drop-in, structured editing of deeply nested JSON objects\n* ⚛️ Schema aware: create nested objects and array elements in real time\n* 🏗 Bulk operations for working with larger objects\n\n## [Demo/example](https://b-gran.github.io/object-editor-react/githubExample.html) \u003csup\u003e\u003ca href=\"https://github.com/b-gran/object-editor-react/blob/master/examples/github-example.js\"\u003e(source)\u003c/a\u003e\u003c/sup\u003e\n\n## Preview\n\n![](assets/demo.gif)\n\n## How it works:\n\n1. Create a `Schema` -- it can be as deeply nested as you need.\n```javascript\nimport { SchemaTypes } from 'object-editor-react';\n\nconst schema = {\n    foo: SchemaTypes.string({ required: true }),\n    \n    bar: {\n        baz: SchemaTypes.arrayOf({\n            nested: SchemaTypes.string(),\n        }),\n    },\n}\n```\n\n2. Drop in an `ObjectEditor` or `ArrayEditor` and provide modification handlers.\n```javascript\nimport { ArrayEditor, ObjectEditor } from 'object-editor-react';\n\nconst YourComponent = props =\u003e {\n    return (\n        \u003cArrayEditor\n            type={schema}\n            object={[{ foo: 'bar' }, { foo: 'baz' }]}\n            onUpdateElement={(el, index) =\u003e ...}\n            onAddElement={(newElement) =\u003e ...}\n            onAddElement={(removedElement, index) =\u003e ...}\n            /\u003e\n    );\n}\n```\n\nA table-based editor is generated based on the `Schema`. For properties\nwith types like string and number, you can just edit the values directly\nusing an `\u003cinput /\u003e` element.\n\nFor more complex properties (object, array, or other complex types), an\n\"Edit\" button in the cell creates a nested Editor (type chosen\nautomatically) for editing the nested object.\n\n## Installation\n\n```\nnpm i object-editor-react\n```\n\n## Usage\n\nTo use `object-editor-react`, just create a schema and provide object modification handlers.\nIt's similar to using a controlled `\u003cinput /\u003e` element.\n\n### Schemas\n\nThere are many different `SchemaTypes` that can be combined and nested however you need.\nThey are similar to `React` PropTypes.\n\nA valid schema is either:\n\n* An object whose leaves are `SchemaTypes`\n* A `SchemaType`\n\nExamples:\n```javascript\nimport { SchemaTypes } from 'object-editor-react';\n\nconst schema = {\n    foo: SchemaTypes.string({ required: true }),\n    bar: {\n        baz: SchemaTypes.any(),\n    }\n};\n// Some valid instances:\n// { foo: 'bar' }\n// { foo: 'bar', bar: { baz: [] } }\n\nconst schema = SchemaTypes.arrayOf(SchemaTypes.string())();\n// Some valid instances:\n// [ 'one', 'two', 'three' ],\n// [ ]\n\nconst schema = {\n    foo: SchemaTypes.arrayOf({\n        bar: SchemaTypes.array()\n    })({ required: true }),\n};\n// Some valid instances:\n// { foo: [ { bar: [] } ] }\n// { foo: [] }\n```\n\n#### `SchemaTypes`\n\n##### `any`\n\nThe value can be any non-`undefined` value.\nThe value must have a type other than `undefined`.\n\n##### `string`\n\nThe value must have type `string`.\n\n##### `boolean`\n\nThe value must have type `boolean`.\n\n##### `function`\n\nThe value must have type `function`.\n\n##### `number`\n\nThe value must have type `number`.\n\n##### `date`\n\nThe value must be a `Date` instance with a non-`NaN` time.\nSpecifically, `Object.toString()` must return `\"[object Date]\"`, and `date.getTime()` must be non-`NaN`.\n\n##### `array`\n\nThe value must be an `Array` instance.\nSpecifically, `Array.isArray()` must return `true`.\n\n##### `object`\n\nThe value must have type `object`.\n\n##### `arrayOf`\n\nThe value must be an `array` whose elements all conform to a specific `SchemaType`.\n\nSpecifically, the value must pass the `SchemaTypes.array` validation test, and each \nelement of the array must pass the validation test of the `SchemaType` passed\nas the argument to `arrayOf`.\n\n##### `SchemaType` options\n\nEach `SchemaType` is a function. Every `SchemaType` except for `arrayOf` \ntakes a single, optional configuration object as its parameter. \n\nThese are the possible configuration options.\n\n| Key | Note | Required? | Default | \n| --- | ---  | ---       | ---     |\n| `required` | is the key corresponding to this `SchemaType` required? | `false` | `false` |\n\nIn the case of `arrayOf`, the `arrayOf` function takes a schema as its\nonly parameters and returns a function that accepts a configuration object.\n\nExample:\n```\nconst schema = SchemaTypes.arrayOf({\n    foo: SchemaTypes.string()\n})({ required: false });\n```\n\n### Editors\n\nThere are two top-level Editor components: `ObjectEditor` and `ArrayEditor`.\n\nBoth Editor types are \"controlled\" components: any changes to the objects are passed to a change handler,\nbut the Editors themselves don't have internal state to track changes.\n\n#### `ObjectEditor`\n\nAn Editor for editing a single `JSON` object.\n\n```javascript\nimport { ObjectEditor } from 'object-editor-react';\n```\n\n`props`\n\n| Prop | Type | Note | Required? | Default |\n| ---  | ---  | ---  | ---       | ---     |\n| `type` | `Schema` | The `Schema` to use when generating the Editor and validating objects. \u003cbr\u003e Must be a valid `Schema` (an object whose keys are `SchemaType:s`, or a `SchemaType`) | `true` |\n| `object` | `any` | the object to edit. must validate according to the `Schema` passed in the `type` prop. | `false` |\n| `onUpdateElement` | `function` | `function onUpdateElement (updatedElement: Object ) -\u003e void`. \u003cbr\u003e Handler called when the object is updated | `true` |\n| `className` | `string` | any additional class names for the editor table wrapper | `false` |\n| `icon` | `function` | a function that returns an icon to use for each row in the table | `false` | no icon used |\n\n#### `ArrayEditor`\n\nAn Editor for editing an array of objects, where each element in the array conforms to a `Schema`.\n\n```\nimport { ArrayEditor } from 'object-editor-react';\n```\n\n`props`\n\n| Prop | Type | Note | Required? | Default |\n| ---  | ---  | ---  | ---       | ---     |\n| `type` | `Schema` | The `Schema` to use when generating the Editor and validating objects. \u003cbr\u003e Each element in the array must conform to this `Schema`. \u003cbr\u003e Must be a valid `Schema` (an object whose keys are `SchemaType:s`, or a `SchemaType`) | `true` |\n| `object` | `any` | The array to edit. \u003cbr\u003e Each element must validate according to the `Schema` passed in the `type` prop. | `false` |\n| `onUpdateElement` | `function` | `function onUpdateElement (updatedElement: Object, updatedIndex: Number) -\u003e void` \u003cbr\u003e Handler called when an element in the array is updated \u003cbr\u003e The updated element and the index are passed | `true` |\n| `onAddElement` | `function` | `function onAddElement (newElement: Object) -\u003e boolean` \u003cbr\u003e Handler called when a new element is added to the array \u003cbr\u003e If this function returns true, the \"add object\" row is cleared  | `true` |\n| `onRemoveElements` | `function` | `function onRemoveElements (removedIndices: [Number]) -\u003e void` \u003cbr\u003e Handler called when an element in the array is removed \u003cbr\u003e The indices of removed elements are passed | `true` |\n| `className` | `string` | any additional class names for the editor table wrapper | `false` |\n| `icon` | `function` | a function that returns an icon to use for each row in the table | `false` | no icon used |\n\n## Examples\n\nSee `examples/example.js` for a stateful implementation with a deeply nested `Schema`.\n\n## Contributing\n\n### 1 Obtain the source and install dependencies\n\n```\n$ git clone https://github.com/b-gran/object-editor-react.git\n$ cd object-editor-react\n$ npm install\n```\n\n### 2 Starting the development server\n\n```\n$ npm start\n✔ Development server running on: http://localhost:5000\n✔ Build completed\n```\n\nThere are two development examples hosted on the dev server:\n1. http://localhost:5000/mainExample.html contains schemas with all root value types\n2. http://localhost:5000/githubExample.html is the example hosted on GitHub\n\n### 3 Running the tests\n\n```\n$ npm run test\n```\n\n\n","funding_links":[],"categories":["🌐 Web Development - Frontend"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-gran%2Fobject-editor-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb-gran%2Fobject-editor-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-gran%2Fobject-editor-react/lists"}