react-json-schema-ui-editor
v0.5.0
Published
React component to edit json schema in a UI.
Downloads
323
Readme
React Json Schema Editor
A configurable React component to display and edit a JSON Schema.
How to use
Coming from a story:
Default.args = {
initialSchema: schema,
renderPropertyName: ({ propertyName }) => (
<h6 style={{ color: "red" }}>{propertyName}</h6>
),
renderAddPropertyButton: ({ onClick }) => (
<button onClick={onClick}>+</button>
),
renderRemovePropertyButton: ({ onClick }) => (
<button onClick={onClick}>Remove</button>
),
renderInput: ({ onChange, value, type, field, options }) => {
if (type === "string") {
return (
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value || "")}
/>
);
}
if (type === "float" || type === "integer") {
return (
<input
type="number"
value={value}
onChange={(e) => onChange(e.target.value || "")}
/>
);
}
if (type === "bigString") {
return (
<textarea
rows={3}
cols={50}
value={value}
onChange={(e) => onChange(e.target.value || "")}
/>
);
}
if (type === "select") {
return (
<select
value={value}
onChange={(e) => onChange(e.target.value)}
name={field}
id={`${field}-select`}
>
{options?.map((opt) => (
<option value={opt}>{opt}</option>
))}
</select>
);
}
if (type === "enum") {
return <>ENUM</>;
}
},
};