@aokiapp/rjsf-mantine-theme

This package provides a Mantine theme for the React JSON Schema Form (rjsf) library.

Demo

We have a playgroud where you can see the theme in action:

npm install
npm run build
cd packages/playground
npm run start

Installation

You can install the package:

npm:

npm install @mantine/core@7 @mantine/dates@7 @mantine/hooks@7 @rjsf/core @tabler/icons-react dayjs react @aokiapp/rjsf-mantine-theme

yarn:

yarn add @mantine/core@7 @mantine/dates@7 @mantine/hooks@7 @rjsf/core @tabler/icons-react dayjs react @aokiapp/rjsf-mantine-theme

Usage

import { MantineProvider } from '@mantine/core';
import Form from '@aokiapp/rjsf-mantine-theme';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; // add only if you use MantineDateWidget
import '@mantine/dropzone/styles.css'; // add only if you use mantine-corparate and FileWidget

render(
  <MantineProvider>
    <Form schema={schema} uiSchema={uiSchema} />
  </MantineProvider>,
  document.getElementById('app'),
);

or with a custom theme:

import { withTheme } from '@rjsf/core';
import { Theme as MantineTheme } from '@aokiapp/rjsf-mantine-theme';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; // if you use MantineDateWidget
import '@mantine/dropzone/styles.css'; // if you use mantine-corparate and FileWidget

// Make modifications to the theme with your own fields and widgets

const Form = withTheme(MantineTheme);

For usage of RJSF, please refer the official documentation.

Credits

This derivative is based on the @pkalisiewicz's previous work.

This repository is built using RJSF (React JSON Schema Form).

We appreciate the hard work and dedication of the RJSF team and contributors in creating and maintaining this valuable tool.

License

Apache-2.0