Get started with react-jsonschema-form CDN
Apache-2.0 licensed
React-jsonschema-form is a popular React library for rendering dynamic forms based on JSON schemas.
Tags:- react
- form
- json-schema
Stable version
Copied!
How to start using react-jsonschema-form CDN
import React from 'react';
import SchemaForm from 'react-jsonschema-form';
import schema from './schema.json';
import uiSchema from './ui-schema.json';
function App() {
const onSubmit = (formData, form) => {
console.log('Form data:', formData);
console.log('Form:', form);
};
return (
<div className="App">
<h1>React JSON Schema Form Example</h1>
<SchemaForm
schema={schema}
uiSchema={uiSchema}
onSubmit={onSubmit}
/>
</div>
);
}
export default App;
// schema.json
{
"title": "Person",
"type": "object",
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"city": {
"type": "string"
}
},
"required": ["name", "age"]
}
// ui-schema.json
{
"type": "object",
"properties": {
"name": {
"ui:placeholder": "Enter your name"
},
"age": {
"ui:placeholder": "Enter your age"
},
"city": {
"ui:placeholder": "Enter your city"
}
}
}
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!