import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import logo from '../../../../docs/images/he-square-700x540-orange.png';
import { Header } from '../../../../docs/src/components/Header';

<Meta title="packages/rje-mantine-widgets/Overview" />
<Header
  yellow={<Header.Title label="react-json-editor" />}
  orange={<Header.Title>@sagold/rje-mantine-widgets</Header.Title>}
/>

# rje-mantine-widgets

> default widgets to be installed with `@sagold/react-json-editor`

```sh
npm install @sagold/react-json-editor @sagold/rje-mantine-widgets
```

Wrap your form in `MantineProvider` and assign the mantine widgets to `react-json-editor`

```tsx
import { useEditor, Widget } from '@sagold/react-json-editor';
import mantineWidgets, { MantineProvider } from '@sagold/rje-mantine-widgets';

function MyForm() {
  const editor = useEditor<MyData>({ schema, widgets: mantineWidgets });

  return (
    <MantineProvider>
      <div className="rje-form">
        <Widget editor={editor} node={editor?.getNode()} />
      </div>
    </MantineProvider>
  );
}
```

## Documentation

- [JSON Schema Options Reference](?path=/docs/api-overview--docs#widgets)
- [Widgets Overview](?path=/story/packages-rje-mantine-widgets-examples-widgets--standard)

For further details [go to the story](?path=/story/packages-rje-mantine-widgets-widgets-objectwidget--options) of each widget