Skip to main content
Version: 3.xx.xx

Import

<ImportButton> is compatible with the useImport hook and is meant to be used as it's upload button. It uses Material UI <LoadingButton> component and native html <input> element. It wraps a <label> with a <LoadingButton> component and <input> element and accepts it's own properties for separately.

Refer to the for more detailed information about useImport. β†’

Usage

Use it like any other Material UI <LoadingButton>. You can use it with useImport:

/src/pages/posts/list.tsx
import { useTable, useImport } from "@pankod/refine-core";
import {
ImportButton,
List,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@pankod/refine-mui";

export const PostList: React.FC = () => {
const { tableQueryResult } = useTable<IPost>();
const { inputProps, isLoading } = useImport<IPost>();

return (
<List
cardHeaderProps={{
action: (
<ImportButton inputProps={inputProps} loading={isLoading} />
),
}}
>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Title</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tableQueryResult.data?.data.map((row) => (
<TableRow key={row.title}>
<TableCell>{row.id}</TableCell>
<TableCell component="th" scope="row">
{row.title}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</List>
);
};

interface IPost {
id: number;
title: string;
}

It looks like this:

Default export button

Properties

hideText

It is used to show and not show the text of the button. When true, only the button icon is visible.

import { ImportButton } from "@pankod/refine-mui";

export const MyImportComponent = () => {
return <ImportButton hideText />;
};

API Reference

Properties

PropertyDescriptionTypeDefault
propsMaterial UI loading button propertiesLoadingButtonProps
inputPropsAllows to set input propsUseImportInputPropsType
hideTextAllows to hide button textbooleanfalse
loadingSets the loading status of the buttonbooleanWhen the request is not completed, loading is true, when it completes it's false
childrenSets the button textReactNode"Import"
startIconSets the icon component of buttonReactNode<ImportExportOutlinedIcon />
svgIconPropsAllows to set icon propsSvgIconProps