React Schema Component
Playground
try it on playground
Usage
import SchemaComponent, { register } from 'react-schema-component'
import { antdLoader, antdMap, antdProLoader, antdProMap } from "react-schema-component/config";
import { ErrorBoundary } from "@ant-design/pro-components";
defineConfig({
componentMap: {
...antdMap,
...antdProMap,
CustomComp1: React.lazy(() => import('./CustomComp1')),
CustomComp2: React.lazy(() => import('./CustomComp2')),
},
loaders: [
antdLoader,
antdProLoader,
],
ErrorBoundary,
})
const schema = JSON.parse(JSON.stringify([
{
name: 'input',
props: {
value: '{{ "count: " + count }}'
}
},
{
name: 'Card',
props: {
title: 'card title',
$children: [
{
name: 'Alert',
props: {
description: 'it can be look as react component with $'
}
}
]
}
},
{
name: 'CustomComp1',
props: {
}
},
]))
function App() {
const [count, setCount] = useState(0)
return (
<SchemaComponent context={{ count }} schema={schema}/>
)
}
API
Name | Type | Description |
---|---|---|
schema | any[] | |
context | object | |
style | CSSProperties | |
className | string | |
renderNotFound | (config) => ReactNode | |
renderFallback | (config) => ReactNode |