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

npm install jsonforms-sdk
# or
pnpm add jsonforms-sdk
# or
yarn add jsonforms-sdk

Peer Dependencies

This package requires the following peer dependencies:

For Web applications:

npm install react react-dom @jsonforms/core @jsonforms/react @jsonforms/material-renderers

For React Native applications:

npm install react react-native @jsonforms/core @jsonforms/react
npm install @react-native-community/datetimepicker  # Optional, for date picker support

Usage

Web

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 (
    <JsonFormsWeb
      schema={schema}
      data={data}
      onChange={(newData) => setData(newData)}
    />
  );
}

React Native

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 (
    <JsonFormsReactNative
      schema={schema}
      data={data}
      onChange={(newData) => setData(newData)}
    />
  );
}

Supported Renderers

Web

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

React Native

• 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.