English | 简体中文
A collection of codemod scripts that help upgrade antd v5 using jscodeshift and postcss.(Inspired by react-codemod)
Before run codemod scripts, you'd better make sure to commit your local git changes firstly.
# Run directly through npx
npx -p @ant-design/codemod-v5 antd5-codemod src
# Or run directly through pnpm
pnpm --package=@ant-design/codemod-v5 dlx antd5-codemod srcReplace import for removed component in v5.
- Change
Commentimport from@ant-design/compatible. - Change
PageHeaderimport from@ant-design/pro-layout. - Use
BackTopfromFloatButton.BackTop.
- import { Avatar, BackTop, Comment, PageHeader } from 'antd';
+ import { Comment } from '@ant-design/compatible';
+ import { PageHeader } from '@ant-design/pro-layout';
+ import { Avatar, FloatButton } from 'antd';
ReactDOM.render( (
<div>
<PageHeader
className="site-page-header"
onBack={() => null}
title="Title"
subTitle="This is a subtitle"
/>
<Comment
actions={actions}
author={<a>Han Solo</a>}
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
content={
<p>
We supply a series of design principles, practical patterns and high quality design
resources (Sketch and Axure), to help people create their product prototypes beautifully
and efficiently.
</p>
}
datetime={
<span title="2016-11-22 11:22:33">8 hours ago</span>
}
/>
- <BackTop />
+ <FloatButton.BackTop />
</div>
);Change props usage from v4 to v5.
import { Tag, Modal, Slider } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
- <Tag
- visible={visible}
- />
+ {visible ? <Tag /> : null}
<Modal
- visible={visible}
+ open={visible}
/>
- <Slider tooltipVisible={visible} tooltipPlacement="bottomLeft" />
+ <Slider tooltip={{ placement: "bottomLeft", open: visible }} />
</>
);
};- Replace
message.warnwithmessage.warning. - Replace
notification.closewithnotification.destroy.
import { message, notification } from 'antd';
const App = () => {
const [messageApi, contextHolder] = message.useMessage();
const onClick1 = () => {
- message.warn();
+ message.warning();
}
const onClick2 = () => {
- messageApi.warn();
+ messageApi.warning();
};
const [notificationApi] = notification.useNotification();
const onClick3 = () => {
- notification.close();
+ notification.destroy();
}
const onClick4 = () => {
- notificationApi.close();
+ notificationApi.destroy();
};
return <>{contextHolder}</>;
};Comment out the style file import from antd (in js file).
- import 'antd/es/auto-complete/style';
- import 'antd/lib/button/style/index.less';
- import 'antd/dist/antd.compact.min.css';
+ // import 'antd/es/auto-complete/style';
+ // import 'antd/lib/button/style/index.less';
+ // import 'antd/dist/antd.compact.min.css';Comment out the style file import from antd in less file.
- @import (reference) '~antd/dist/antd.less';
- @import '~antd/es/button/style/index.less';
+ /* @import (reference) '~antd/dist/antd.less'; */
+ /* @import '~antd/es/button/style/index.less'; */
@import './styles.less';
body {
font-size: 14px;
} npm run release
npm publishMIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent