jsonforms-sdk

A cross-platform JSONForms SDK that supports both web and React Native applications.

Features

- ✅ Web support using Material UI renderers
- ✅ React Native support with custom renderers
- ✅ TypeScript support
- ✅ Unified API for both platforms

Installation

``bash
npm install jsonforms-sdk


or

pnpm add jsonforms-sdk

or

yarn add jsonforms-sdk
`

$3

This package requires the following peer dependencies:

For Web applications:
`bash
npm install react react-dom @jsonforms/core @jsonforms/react @jsonforms/material-renderers
`

For React Native applications:
`bash
npm install react react-native @jsonforms/core @jsonforms/react
npm install @react-native-community/datetimepicker # Optional, for date picker support
`

Usage

$3

`tsx
import { JsonFormsWeb } from 'jsonforms-sdk/web';
// or
import { JsonForms } from 'jsonforms-sdk';

const schema = {
type: 'object',
properties: {
name: { type: 'string' },
age: { type: 'number' },
},
};

function MyForm() {
const [data, setData] = useState({});

return (
schema={schema}
data={data}
onChange={(newData) => setData(newData)}
/>
);
}
`

$3

`tsx
import { JsonFormsReactNative } from 'jsonforms-sdk/react-native';

const schema = {
type: 'object',
properties: {
name: { type: 'string' },
age: { type: 'number' },
},
};

function MyForm() {
const [data, setData] = useState({});

return (
schema={schema}
data={data}
onChange={(newData) => setData(newData)}
/>
);
}
`

Supported Renderers

$3


- All Material UI renderers from @jsonforms/material-renderers

$3

- Text Input
- Number Input
- Radio Group
- Checkbox
- Select (Dropdown)
- Date Picker
- Label
- Group
- Categorization (Tabs)

Custom Renderers

You can extend the SDK with custom renderers. See the renderer implementations in src/react-native/renderers/` for examples.