Ant Design Compatible
Install
yarn add @ant-design/compatible
Introduction
Helps you to compatible different components between v3 and v4.
Follow Component are provided compatible version:
- Form
- Icon
- Mention
Form
Form of v3 api is different with v4:
// V3import Form Input Button from 'antd'; Component { const form = thisprops return <Form> form <Input /> <Button>Submit</Button> </Form> ; } MyForm;
Change to:
// V4 with compatibleimport Form as LegacyForm from '@ant-design/compatible';import Input Button from 'antd';import '@ant-design/compatible/assets/index.css'; Component { const form = thisprops return <LegacyForm> form <Input /> <Button>Submit</Button> </LegacyForm> ; } MyForm;
Icon
Just import Icon
from package @ant-design/compatible
and the reset is almost same as before.
// V3import Icon Button from 'antd'; Component { return <div ="icons-list"> <Button>hello button</Button> <Icon ="home" /> <Icon ="setting" ="filled" /> <Icon ="smile" ="outlined" /> <Icon ="sync" /> <Icon ="smile" = /> <Icon ="loading" /> </div> ; } ;
Change to:
// V4 with compatibleimport Icon as LegacyIcon from '@ant-design/compatible'; Component { return <div ="icons-list"> <Button>hello button</Button> <LegacyIcon ="home" /> <LegacyIcon ="setting" ="filled" /> <LegacyIcon ="smile" ="outlined" /> <LegacyIcon ="sync" /> <LegacyIcon ="smile" = /> <LegacyIcon ="loading" /> </div> ; } ;
Mention
The legacy usage in v3
import Mention from 'antd'; const toString = Mention; ReactDOM;
Compatible usage in v4
import Mention from '@ant-design/compatible';import '@ant-design/compatible/assets/index.css'; const toString = Mention; ReactDOM;