Inferencer

You can automatically generate views for your resources using @refinedev/inferencer. Inferencer exports MuiListInferencer, MuiShowInferencer, MuiEditInferencer, MuiCreateInferencer and MuiInferencer (which combines all in one place) components.

Usage

Inferencer components can be imported from @refinedev/inferencer/mui. 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 {
    ThemedLayout,
    RefineThemes,
    RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

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

import { MuiInferencer } from "@refinedev/inferencer/mui";

const App = () => {
    return (
        <BrowserRouter>
            <ThemeProvider theme={RefineThemes.Blue}>
                <CssBaseline />
                <GlobalStyles
                    styles={{ html: { WebkitFontSmoothing: "auto" } }}
                />
                <RefineSnackbarProvider>
                    <Refine
                        dataProvider={dataProvider(API_URL)}
                        routerProvider={routerProvider}
                        resources={[
                            {
                                name: "samples",
                                list: "/samples",
                            },
                        ]}
                    >
                        <Routes>
                            <Route
                                element={
                                    <ThemedLayout>
                                        <Outlet />
                                    </ThemedLayout>
                                }
                            >
                                <Route
                                    path="/samples"
                                    element={<MuiInferencer />}
                                />
                            </Route>
                        </Routes>
                    </Refine>
                </RefineSnackbarProvider>
            </ThemeProvider>
        </BrowserRouter>
    );
};

In Custom Components

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

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

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

const SampleEdit = () => {
    return (
        <MuiInferencer 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 useDatagrid hook from @refinedev/mui.

http://localhost:3000

import { Refine } from "@refinedev/core";

import {
    ThemedLayout,
    RefineThemes,
    RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import dataProvider from "@refinedev/simple-rest";

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <ThemeProvider theme={RefineThemes.Blue}>
                <CssBaseline />
                <GlobalStyles
                    styles={{ html: { WebkitFontSmoothing: "auto" } }}
                />
                <RefineSnackbarProvider>
                    <Refine
                        dataProvider={dataProvider(API_URL)}
                        routerProvider={routerProvider}
                        resources={[
                            {
                                name: "samples",
                                list: "/samples",
                            },
                        ]}
                    >
                        <Routes>
                            <Route
                                element={
                                    <ThemedLayout>
                                        <Outlet />
                                    </ThemedLayout>
                                }
                            >
                                <Route
                                    path="/samples"
                                    element={<MuiInferencer />}
                                />
                            </Route>
                        </Routes>
                    </Refine>
                </RefineSnackbarProvider>
            </ThemeProvider>
        </BrowserRouter>
    );
};

Show

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

http://localhost:3000

import { Refine } from "@refinedev/core";

import {
    ThemedLayout,
    RefineThemes,
    RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import dataProvider from "@refinedev/simple-rest";

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <ThemeProvider theme={RefineThemes.Blue}>
                <CssBaseline />
                <GlobalStyles
                    styles={{ html: { WebkitFontSmoothing: "auto" } }}
                />
                <RefineSnackbarProvider>
                    <Refine
                        dataProvider={dataProvider(API_URL)}
                        routerProvider={routerProvider}
                        resources={[
                            {
                                name: "samples",
                                show: "/samples/show/:id",
                            },
                        ]}
                    >
                        <Routes>
                            <Route
                                element={
                                    <ThemedLayout>
                                        <Outlet />
                                    </ThemedLayout>
                                }
                            >
                                <Route
                                    path="/samples/show/:id"
                                    element={<MuiInferencer />}
                                />
                            </Route>
                        </Routes>
                    </Refine>
                </RefineSnackbarProvider>
            </ThemeProvider>
        </BrowserRouter>
    );
};

Create

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

http://localhost:3000

import { Refine } from "@refinedev/core";

import {
    ThemedLayout,
    RefineThemes,
    RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import dataProvider from "@refinedev/simple-rest";

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <ThemeProvider theme={RefineThemes.Blue}>
                <CssBaseline />
                <GlobalStyles
                    styles={{ html: { WebkitFontSmoothing: "auto" } }}
                />
                <RefineSnackbarProvider>
                    <Refine
                        dataProvider={dataProvider(API_URL)}
                        routerProvider={routerProvider}
                        resources={[
                            {
                                name: "samples",
                                create: "/samples/create",
                            },
                        ]}
                    >
                        <Routes>
                            <Route
                                element={
                                    <ThemedLayout>
                                        <Outlet />
                                    </ThemedLayout>
                                }
                            >
                                <Route
                                    path="/samples/create"
                                    element={<MuiInferencer />}
                                />
                            </Route>
                        </Routes>
                    </Refine>
                </RefineSnackbarProvider>
            </ThemeProvider>
        </BrowserRouter>
    );
};

Edit

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

http://localhost:3000

import { Refine } from "@refinedev/core";

import {
    ThemedLayout,
    RefineThemes,
    RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import dataProvider from "@refinedev/simple-rest";

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <ThemeProvider theme={RefineThemes.Blue}>
                <CssBaseline />
                <GlobalStyles
                    styles={{ html: { WebkitFontSmoothing: "auto" } }}
                />
                <RefineSnackbarProvider>
                    <Refine
                        dataProvider={dataProvider(API_URL)}
                        routerProvider={routerProvider}
                        resources={[
                            {
                                name: "samples",
                                edit: "/samples/edit/:id",
                            },
                        ]}
                    >
                        <Routes>
                            <Route
                                element={
                                    <ThemedLayout>
                                        <Outlet />
                                    </ThemedLayout>
                                }
                            >
                                <Route
                                    path="/samples/edit/:id"
                                    element={<MuiInferencer />}
                                />
                            </Route>
                        </Routes>
                    </Refine>
                </RefineSnackbarProvider>
            </ThemeProvider>
        </BrowserRouter>
    );
};

Example

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

VIEW SOURCE CODE →

RUN IN YOUR LOCAL

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