This is a wrapper component built on top of json editor and react.
npm install emerald-json-editor-reactWrapper around json-editor and react. NB! Does currently not work with next.js projects.
```
npm install emerald-json-editor-react
`javascript
import React, { useState } from "react";
import { JsonEditorWrapper } from "emerald-json-editor-react";
import schema from "schema.json";
const JsonForm = () => {
const [data, setData] = useState(undefined);
return (
data={data}
setData={setData}
/>
);
};
`
A custonm field is a React component that is responsible for rendering
the input for a particular fragment of the JSON document identified by
matching against the schema (in this case, string properties with a
format of x-fruit). You can invent/add extra schema properties forformat
this purpose, you don't have to reuse the existing ones (like) as done here. Be careful when registering multiple custom
fields that multiple ones can't match on the same schema; the order
fields are tried in is not well defined.
`javascript
import { registerJsonEditorField } from "emerald-json-editor-react";
const FruitSelector = ({ value, setValue, schema, context }) => {
return (
registerJsonEditorField(
(schema) => schema.type === "string" && schema["format"] === "x-fruit",
FruitSelector
);
`
The importFile prop of is an optional
function for file upload handling. This is an example of the function
using axios:
`javascript
export const importFile = (file) => {
const formData = new FormData();
formData.append("file", file);
return client.post(/api/file/new, formData, {`
headers: {
"Content-Type": "multipart/form-data",
},
});
};
The importFile function should return an object (inside a promise)
with a .data.file property containing the URL to the uploaded file.
The onValidationStatusChange prop is an optional function that is used to update a local state based on form validation, for example:
`javascript
const [isDataValid, setIsDataValid] = useState(false);
const onValidationStatusChange = (status) => {
setIsDataValid(status);
};
``