Inferencer

You can automatically generate views for your resources using @pankod/refine-inferencer. Inferencer exports MuiListInferencer, MuiShowInferencer, MuiCreateInferencer and MuiEditInferencer components.

Usage

Material UI components can be imported from @pankod/refine-inferencer/mui. 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 {
    ThemeProvider,
    LightTheme,
    CssBaseline,
    GlobalStyles,
} from "@pankod/refine-mui";
import {
    MuiListInferencer,
    MuiShowInferencer,
    MuiCreateInferencer,
    MuiEditInferencer,
} from "@pankod/refine-inferencer/mui";

const App = () => {
    return (
        <ThemeProvider theme={LightTheme}>
            <CssBaseline />
            <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
            <Refine
                resources={[
                    {
                        name: "samples",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                        create: MuiCreateInferencer,
                        edit: MuiEditInferencer,
                    },
                ]}
            />
        </ThemeProvider>
    );
};

In Custom Components

import {
    MuiListInferencer,
    MuiShowInferencer,
    MuiCreateInferencer,
    MuiEditInferencer,
} from "@pankod/refine-inferencer/mui";

const SampleList = () => {
    return (
        <MuiListInferencer resource="samples" />
    );
};

const SampleShow = () => {
    return (
        <MuiShowInferencer resource="samples" />
    );
};

const SampleCreate = () => {
    return (
        <MuiCreateInferencer resource="samples" />
    );
};

const SampleEdit = () => {
    return (
        <MuiEditInferencer resource="samples" />
    );
};

info

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

Views

MuiListInferencer

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

http://localhost:3000/posts

import { Refine } from "@pankod/refine-core";
import {
    Layout,
    ThemeProvider,
    LightTheme,
    CssBaseline,
    GlobalStyles,
} from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import {
    MuiListInferencer,
    MuiShowInferencer,
    MuiCreateInferencer,
    MuiEditInferencer,
} from "@pankod/refine-inferencer/mui";

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

const App: React.FC = () => {
    return (
        <ThemeProvider theme={LightTheme}>
            <CssBaseline />
            <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider(API_URL)}
                Layout={Layout}
                resources={[
                    {
                        name: "samples",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                        create: MuiCreateInferencer,
                        edit: MuiEditInferencer,
                        canDelete: true,
                    },
                    {
                        name: "categories",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                    },
                    {
                        name: "tags",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                    },
                ]}
            />
        </ThemeProvider>
    );
};

MuiShowInferencer

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

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

import { Refine } from "@pankod/refine-core";
import {
    Layout,
    ThemeProvider,
    LightTheme,
    CssBaseline,
    GlobalStyles,
} from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import {
    MuiListInferencer,
    MuiShowInferencer,
    MuiCreateInferencer,
    MuiEditInferencer,
} from "@pankod/refine-inferencer/mui";

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

const App: React.FC = () => {
    return (
        <ThemeProvider theme={LightTheme}>
            <CssBaseline />
            <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider(API_URL)}
                Layout={Layout}
                resources={[
                    {
                        name: "samples",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                        create: MuiCreateInferencer,
                        edit: MuiEditInferencer,
                        canDelete: true,
                    },
                    {
                        name: "categories",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                    },
                    {
                        name: "tags",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                    },
                ]}
            />
        </ThemeProvider>
    );
};

MuiCreateInferencer

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

http://localhost:3000/samples/create

import { Refine } from "@pankod/refine-core";
import {
    Layout,
    ThemeProvider,
    LightTheme,
    CssBaseline,
    GlobalStyles,
} from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import {
    MuiListInferencer,
    MuiShowInferencer,
    MuiCreateInferencer,
    MuiEditInferencer,
} from "@pankod/refine-inferencer/mui";

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

const App: React.FC = () => {
    return (
        <ThemeProvider theme={LightTheme}>
            <CssBaseline />
            <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider(API_URL)}
                Layout={Layout}
                resources={[
                    {
                        name: "samples",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                        create: MuiCreateInferencer,
                        edit: MuiEditInferencer,
                        canDelete: true,
                    },
                    {
                        name: "categories",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                    },
                    {
                        name: "tags",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                    },
                ]}
            />
        </ThemeProvider>
    );
};

MuiEditInferencer

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

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

import { Refine } from "@pankod/refine-core";
import {
    Layout,
    ThemeProvider,
    LightTheme,
    CssBaseline,
    GlobalStyles,
} from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import {
    MuiListInferencer,
    MuiShowInferencer,
    MuiCreateInferencer,
    MuiEditInferencer,
} from "@pankod/refine-inferencer/mui";

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

const App: React.FC = () => {
    return (
        <ThemeProvider theme={LightTheme}>
            <CssBaseline />
            <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider(API_URL)}
                Layout={Layout}
                resources={[
                    {
                        name: "samples",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                        create: MuiCreateInferencer,
                        edit: MuiEditInferencer,
                        canDelete: true,
                    },
                    {
                        name: "categories",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                    },
                    {
                        name: "tags",
                        list: MuiListInferencer,
                        show: MuiShowInferencer,
                    },
                ]}
            />
        </ThemeProvider>
    );
};

Live StackBlitz Example

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