Inferencer

You can automatically generate views for your resources using @pankod/refine-inferencer. Inferencer exports MantineListInferencer, MantineShowInferencer, MantineEditInferencer, MantineCreateInferencer and MantineInferencer (which combines all in one place) components.

Usage

Mantine components can be imported from @pankod/refine-inferencer/mantine. You can directly use the components in resources prop of Refine component or you can use them in your custom components by passing the resource prop as the resource name.

Inresourcesprop

import {
  Layout,
  MantineProvider,
  LightTheme,
  Global,
} from '@pankod/refine-mantine'

import { MantineInferencer } from '@pankod/refine-inferencer/mantine'

const App = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: 'auto' } }} />
      <Refine
        resources={[
          {
            name: 'samples',
            list: MantineInferencer,
            show: MantineInferencer,
            create: MantineInferencer,
            edit: MantineInferencer,
          },
        ]}
      />
    </MantineProvider>
  )
}

In Custom Components

import { MantineInferencer } from '@pankod/refine-inferencer/mantine'

const SampleList = () => {
  return (
    <MantineInferencer resource="samples" action="list" />
  )
}

const SampleShow = () => {
  return (
    <MantineInferencer resource="samples" action="show" id="1" />
  )
}

const SampleCreate = () => {
  return (
    <MantineInferencer resource="samples" action="create" />
  )
}

const SampleEdit = () => {
  return (
    <MantineInferencer resource="samples" action="edit" id="1" />
  )
}

info

To learn more about @pankod/refine-inferencer package, please check out Docs

Views

List

Generates a sample list view for your resources according to the API response. It uses List component and from @pankod/refine-mantine and useTable hook from @pankod/refine-react-table.

http://localhost:3000

Live previews only work with the latest documentation.

import { Refine } from '@pankod/refine-core'
import {
  Layout,
  MantineProvider,
  LightTheme,
  Global,
} from '@pankod/refine-mantine'
import routerProvider from '@pankod/refine-react-router-v6'
import dataProvider from '@pankod/refine-simple-rest'

import { MantineInferencer } from '@pankod/refine-inferencer/mantine'

const API_URL = 'https://api.fake-rest.refine.dev'

const App: React.FC = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: 'auto' } }} />
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(API_URL)}
        Layout={Layout}
        resources={[
          {
            name: 'samples',
            list: MantineInferencer,
            show: MantineInferencer,
            create: MantineInferencer,
            edit: MantineInferencer,
            canDelete: true,
          },
          {
            name: 'categories',
            list: MantineInferencer,
            show: MantineInferencer,
          },
          {
            name: 'tags',
            list: MantineInferencer,
            show: MantineInferencer,
          },
        ]}
      />
    </MantineProvider>
  )
}

Show

Generates a sample show view for your resources according to the API response. It uses Show and field components from @pankod/refine-mantine with useShow hook from @pankod/refine-core.

http://localhost:3000

Live previews only work with the latest documentation.

import { Refine } from '@pankod/refine-core'
import {
  Layout,
  MantineProvider,
  LightTheme,
  Global,
} from '@pankod/refine-mantine'
import routerProvider from '@pankod/refine-react-router-v6'
import dataProvider from '@pankod/refine-simple-rest'

import { MantineInferencer } from '@pankod/refine-inferencer/mantine'

const API_URL = 'https://api.fake-rest.refine.dev'

const App: React.FC = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: 'auto' } }} />
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(API_URL)}
        Layout={Layout}
        resources={[
          {
            name: 'samples',
            list: MantineInferencer,
            show: MantineInferencer,
            create: MantineInferencer,
            edit: MantineInferencer,
            canDelete: true,
          },
          {
            name: 'categories',
            list: MantineInferencer,
            show: MantineInferencer,
          },
          {
            name: 'tags',
            list: MantineInferencer,
            show: MantineInferencer,
          },
        ]}
      />
    </MantineProvider>
  )
}

Create

Generates a sample create view for your resources according to the first record in list API response. It uses Create component and useForm hook from @pankod/refine-mantine.

http://localhost:3000

Live previews only work with the latest documentation.

import { Refine } from '@pankod/refine-core'
import {
  Layout,
  MantineProvider,
  LightTheme,
  Global,
} from '@pankod/refine-mantine'
import routerProvider from '@pankod/refine-react-router-v6'
import dataProvider from '@pankod/refine-simple-rest'

import { MantineInferencer } from '@pankod/refine-inferencer/mantine'

const API_URL = 'https://api.fake-rest.refine.dev'

const App: React.FC = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: 'auto' } }} />
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(API_URL)}
        Layout={Layout}
        resources={[
          {
            name: 'samples',
            list: MantineInferencer,
            show: MantineInferencer,
            create: MantineInferencer,
            edit: MantineInferencer,
            canDelete: true,
          },
          {
            name: 'categories',
            list: MantineInferencer,
            show: MantineInferencer,
          },
          {
            name: 'tags',
            list: MantineInferencer,
            show: MantineInferencer,
          },
        ]}
      />
    </MantineProvider>
  )
}

Edit

Generates a sample edit view for your resources according to the API response. It uses Edit component and useForm hook from @pankod/refine-mantine.

http://localhost:3000

Live previews only work with the latest documentation.

import { Refine } from '@pankod/refine-core'
import {
  Layout,
  MantineProvider,
  LightTheme,
  Global,
} from '@pankod/refine-mantine'
import routerProvider from '@pankod/refine-react-router-v6'
import dataProvider from '@pankod/refine-simple-rest'

import { MantineInferencer } from '@pankod/refine-inferencer/mantine'

const API_URL = 'https://api.fake-rest.refine.dev'

const App: React.FC = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: 'auto' } }} />
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(API_URL)}
        Layout={Layout}
        resources={[
          {
            name: 'samples',
            list: MantineInferencer,
            show: MantineInferencer,
            create: MantineInferencer,
            edit: MantineInferencer,
            canDelete: true,
          },
          {
            name: 'categories',
            list: MantineInferencer,
            show: MantineInferencer,
          },
          {
            name: 'tags',
            list: MantineInferencer,
            show: MantineInferencer,
          },
        ]}
      />
    </MantineProvider>
  )
}

Example

Below you'll find a Live CodeSandbox Example displaying a fully setup Refine app with @pankod/refine-inferencer/mantine components.

VIEW SOURCE CODE →

RUN IN YOUR LOCAL

npm create refine-app@latest -- --example inferencer-mantine