Skip to main content
Version: 4.xx.xxSwizzle Ready

Email

This field is used to display email values. It uses the <Link> component of <Typography> from Ant Design.

Swizzle

You can swizzle this component to customize it with the refine CLI

Usage​

Let's see how we can use <EmailField> with the example in the user list.

http://localhost:3000
import {
List,
useTable,
EmailField,
} from "@refinedev/antd";
import { Table } from "antd";

const UserList: React.FC = () => {
const { tableProps } = useTable<IPost>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column
dataIndex="email"
title="Email"
render={(value: string) => <EmailField value={value} />}
width="100%"
/>
...
</Table>
</List>
);
};

interface IPost {
id: number;
email: string;
}
tip

<EmailField> uses "mailto:" in the href prop of the <Link> component. For this reason, clicking <EmailField> opens your device's default mail application.

API Reference​

External Props

It also accepts all props of Ant Design Link.

Refer to the documentation for the rest of Link properties. &#8594