npm i unplugin-react-components -D
Vite
// vite.config.ts import Components from 'unplugin-react-components/vite' export default defineConfig({ plugins: [ React(), Components({ /* options */ }), ], })
Webpack
// webpack.config.js module.exports = { /* ... */ plugins: [ require('unplugin-react-components/webpack')({ /* options */ }) ] }
Use components in templates as you would usually do, it will import components on demand, and there is no import and component registration required anymore! If you register the parent component asynchronously (or lazy route), the auto-imported components will be code-split along with their parent.
It will automatically turn this
export function App() { return ( <CompA /> ) }
into this
import { CompA } from './CompA' export function App() { return ( <CompA /> ) }
Components({ dts: true, // enabled by default if `typescript` is installed })
Once the setup is done, a components.d.ts will be generated and updates automatically with the type definitions. Feel free to commit it into git or not as you want.
Make sure you also add components.d.ts to your tsconfig.json under include
Use third-party components in your components as you would usually do, it will import components on demand, and there is no import and component registration required anymore!
At present, the number of UI supported is limited. If you want to provide more UI support, you are welcome to propose PR or you can use custom resolver.
Supported Resolvers:
import { AntdResolver, MuiResolver } from 'unplugin-react-components' Components({ resolvers: [ AntdResolver(), MuiResolver() ], })
Components({ resolvers: [ () => [ /** * in App.tsx * import { Form } from 'formik' * * in components.d.ts * const MikForm: typeof import('formik')['Form'] * * **/ { name: 'MikForm', from: 'formik', type: 'Export', orignalName: 'Form' }, /** * in App.tsx * import XXX fro * * in components.d.ts * const Component: typeof import('ui')['default'] * * **/ { name: 'Component', from: 'ui', type: 'ExportDefault', orignalName: 'XXX' } ] ], })
or you can use createResolver
import { createResolver } from 'unplugin-react-components' Components({ resolvers: [ createResolver({ module: 'react-ui', prefix: 'RUi', exclude: (name) => { return name.startsWith('Excluded') }, }) ] })
Assume you are using antd
export default function App() { return ( <Button /> ) }
we will transform this into
import { Button } from 'antd' import 'antd/es/button/style/index.css' export default function App() { return ( <Button /> ) }