README
antd-extended
Features
- Uses dayjs instead of moment for all date-related pickers
- Adds several new sizes
x-small
,x-large
andxx-large
to most components - Adds a new
secondary
type for buttons - Adds new
utc
andstartOf
options to date-related pickers - Adds new
isBefore
andisAfter
options to the<TimePicker />
- Adds a new
<Checkbox.Button />
component to bring button styles to checkboxes
Docs
Install
npm install @mgcrea/antd-extended
Quickstart
import React from 'react';
import {Button} from '@mgcrea/antd-extended';
import '@mgcrea/antd-extended/lib/esm/index.css'; // optional
function App() {
const {
register,
handleSubmit,
formState: {errors},
} = useForm();
const onSubmit = (data) => console.log(data);
return (
<div>
<Button size="x-small">X-Small</Button>
<Button type="secondary" size="x-large">
X-Large
</Button>
</div>
);
}
Dynamic style import configuration
Like the original antd
package, @mgcrea/antd-extended
ships with .less
styles that you may want to import in your app.
Babel plugin
Using babel-plugin-import:
// babel.config.js
plugins: [
['import', {libraryName: '@mgcrea/antd-extended', libraryDirectory: 'lib/esm', style: (name) => { return [`antd/es/${name}/style/index.less`, `@mgcrea/antd-extended/lib/esm/${name}/style/index.less`]; }}, '@mgcrea/antd-extended'],
],
Vite plugin
Using vitePluginImp:
// vite.config.js
plugins: [
vitePluginImp({
libList: [
{
libName: '@mgcrea/antd-extended',
replaceOldImport: false,
style: (name) => {
return [`antd/es/${name}/style/index.less`, `@mgcrea/antd-extended/lib/esm/${name}/style/index.less`];
},
},
],
}),
],