Inferencer

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

Usage

Inferencer components can be imported from @refinedev/inferencer/mantine. You can directly use the components in your routes without passing any props. If you use a routerProvider, it will infer the resource, action and id from the current route.

Inresourcesprop

import { Layout, Global } from "@refinedev/mantine";
import { MantineProvider, LightTheme } from "@mantine/core";

import { MantineInferencer } from "@refinedev/inferencer/mantine";

const App = () => {
    return (
        <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
            <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
            <BrowserRouter>
                <Refine
                    routerProvider={routerProvider}
                    resources={[
                        {
                            name: "samples",
                            list: "/samples",
                        },
                    ]}
                >
                    <Routes>
                        <Route path="/samples" element={<MantineInferencer />} />
                    </Routes>
                </Refine>
            </BrowserRouter>
        </MantineProvider>
    );
};

In Custom Components

import { MantineInferencer } from "@refinedev/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 @refinedev/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 @refinedev/mantine and useTable hook from @refinedev/react-table.

http://localhost:3000/samples

import { Refine } from "@refinedev/core";
import { Layout, LightTheme } from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { MantineInferencer } from "@refinedev/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" } }} />
            <BrowserRouter>
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider(API_URL)}
                    resources={[
                        {
                            name: "samples",
                            list: "/samples",
                        }
                    ]}
                >
                    <Routes>
                        <Route
                            element={(
                                <Layout>
                                    <Outlet />
                                </Layout>
                            )}
                        >
                            <Route path="/samples" element={<MantineInferencer />} />
                        </Route>
                    </Routes>
                </Refine>
            </BrowserRouter>
        </MantineProvider>
    );
};

Show

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

http://localhost:3000/samples/show/123

import { Refine } from "@refinedev/core";
import { Layout, LightTheme } from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { MantineInferencer } from "@refinedev/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" } }} />
            <BrowserRouter>
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider(API_URL)}
                    resources={[
                        {
                            name: "samples",
                            show: "/samples/show/:id",
                        }
                    ]}
                >
                    <Routes>
                        <Route
                            element={(
                                <Layout>
                                    <Outlet />
                                </Layout>
                            )}
                        >
                            <Route path="/samples/show/:id" element={<MantineInferencer />} />
                        </Route>
                    </Routes>
                </Refine>
            </BrowserRouter>
        </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 @refinedev/mantine.

http://localhost:3000/samples/create

import { Refine } from "@refinedev/core";
import { Layout, LightTheme } from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { MantineInferencer } from "@refinedev/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" } }} />
            <BrowserRouter>
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider(API_URL)}
                    resources={[
                        {
                            name: "samples",
                            create: "/samples/create",
                        }
                    ]}
                >
                    <Routes>
                        <Route
                            element={(
                                <Layout>
                                    <Outlet />
                                </Layout>
                            )}
                        >
                            <Route path="/samples/create" element={<MantineInferencer />} />
                        </Route>
                    </Routes>
                </Refine>
            </BrowserRouter>
        </MantineProvider>
    );
};

Edit

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

http://localhost:3000/samples/edit/123

import { Refine } from "@refinedev/core";
import { Layout, LightTheme } from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { MantineInferencer } from "@refinedev/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" } }} />
            <BrowserRouter>
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider(API_URL)}
                    resources={[
                        {
                            name: "samples",
                            edit: "/samples/edit/:id",
                        }
                    ]}
                >
                    <Routes>
                        <Route
                            element={(
                                <Layout>
                                    <Outlet />
                                </Layout>
                            )}
                        >
                            <Route path="/samples/edit/:id" element={<MantineInferencer />} />
                        </Route>
                    </Routes>
                </Refine>
            </BrowserRouter>
        </MantineProvider>
    );
};

Example

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

VIEW SOURCE CODE →

RUN IN YOUR LOCAL

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