Skip to main content
Version: 3.xx.xx

Inferencer

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

Usage​

Chakra UI components can be imported from @pankod/refine-inferencer/chakra-ui. 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.

import { Layout, ChakraProvider, refineTheme } from "@pankod/refine-chakra-ui";

import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";

const App = () => {
return (
<ChakraProvider theme={refineTheme}>
<Refine
resources={[
{
name: "samples",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
create: ChakraUIInferencer,
edit: ChakraUIInferencer,
},
]}
/>
</ChakraProvider>
);
};
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 from @pankod/refine-chakra-ui and useTable hook from @pankod/refine-react-table.

http://localhost:3000/samples
import { Refine } from "@pankod/refine-core";
import { Layout, ChakraProvider, refineTheme } from "@pankod/refine-chakra-ui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";

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

const App: React.FC = () => {
return (
<ChakraProvider theme={refineTheme}>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
Layout={Layout}
resources={[
{
name: "samples",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
create: ChakraUIInferencer,
edit: ChakraUIInferencer,
canDelete: true,
},
{
name: "categories",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
},
{
name: "tags",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
},
]}
/>
</ChakraProvider>
);
};

Show​

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

http://localhost:3000/samples/show/123
import { Refine } from "@pankod/refine-core";
import { Layout, ChakraProvider, refineTheme } from "@pankod/refine-chakra-ui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";

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

const App: React.FC = () => {
return (
<ChakraProvider theme={refineTheme}>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
Layout={Layout}
resources={[
{
name: "samples",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
create: ChakraUIInferencer,
edit: ChakraUIInferencer,
canDelete: true,
},
{
name: "categories",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
},
{
name: "tags",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
},
]}
/>
</ChakraProvider>
);
};

Create​

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

http://localhost:3000/samples/create
import { Refine } from "@pankod/refine-core";
import { Layout, ChakraProvider, refineTheme } from "@pankod/refine-chakra-ui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";

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

const App: React.FC = () => {
return (
<ChakraProvider theme={refineTheme}>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
Layout={Layout}
resources={[
{
name: "samples",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
create: ChakraUIInferencer,
edit: ChakraUIInferencer,
canDelete: true,
},
{
name: "categories",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
},
{
name: "tags",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
},
]}
/>
</ChakraProvider>
);
};

Edit​

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

http://localhost:3000/samples/edit/123
import { Refine } from "@pankod/refine-core";
import { Layout, ChakraProvider, refineTheme } from "@pankod/refine-chakra-ui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";

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

const App: React.FC = () => {
return (
<ChakraProvider theme={refineTheme}>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
Layout={Layout}
resources={[
{
name: "samples",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
create: ChakraUIInferencer,
edit: ChakraUIInferencer,
canDelete: true,
},
{
name: "categories",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
},
{
name: "tags",
list: ChakraUIInferencer,
show: ChakraUIInferencer,
},
]}
/>
</ChakraProvider>
);
};

Live StackBlitz Example​

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