optum / jsonschema-editor-react Goto Github PK
View Code? Open in Web Editor NEWA react module for maintaining json schema. Built with Chakra-UI
License: Apache License 2.0
A react module for maintaining json schema. Built with Chakra-UI
License: Apache License 2.0
file in src don't import anything from typescript, it is better to move typescript to dev dependencies as it won't be use in runtime
Modal is being created for each item in a schema object. For larger schemas, this produced less than ideal performance.
Hi,How can I use this react compoment to import a JsonSchema to Override jsonSchema which I was Modifing ?
Would you be interested in i18n support for the component? Would be possible by either directly adding i18n to the component or by allowing to override the labels/texts. I would be willing to provide a PR either way.
Is there any plan to update it?
First of all thanks for your work, this component is exactly what i need for my project. However i've encountered an error while trying to use it.
Do you know how can i fix this problem?
Thank you
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
▼ 2 stack frames were expanded.
resolveDispatcher
node_modules/@optum/json-schema-editor/node_modules/react/cjs/react.development.js:1465
useState
node_modules/@optum/json-schema-editor/node_modules/react/cjs/react.development.js:1496
▲ 2 stack frames were expanded.
JsonSchemaEditor
src/index.tsx:39
36 | */
37 | const JsonSchemaEditor = (props) => {
38 | const [isAdvancedOpen, setIsAdvancedOpen] = React.useState(false);
> 39 | const [currentLens, setCurrentLens] = React.useState(new Array());
40 | const focusRef = React.createRef();
41 | const { onSchemaChange } = props;
42 | const onCloseImport = () => {
View compiled
▶ 18 stack frames were collapsed.
Thank you for the great package!!!
I'm using the JsonSchemaEditor like this:
handleChange(schema) {
if (!isEqual(JSON.parse(schema), JSON.parse(this.props.data))) {
console.log(this.props);
this.props.onChange(schema);
}
}
<JsonSchemaEditor
onSchemaChange={this.handleChange}
data={JSON.parse(this.props.data)}
/>
Basically the schema gets stored in a state. This state gets updated in case the user edits the currently loaded schema.
There is a race condition that occurs where the state gets updated with the fetched schema, however the schema inside the editor is still empty. The handleChange function gets called and the empty schema overwrites the state. Leaving the SchemaEditor to be empty.
For some reason the handleChange function before the data prop is properly loaded inside the JsonSchemaEditor component.
I hope someone can help with this issue
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.