unplugin-react-components

Install

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 */ })
  ]
}

Usage

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 />
  )
}

TypeScript

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

Importing from UI Libraries

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:

• Antd
• Mui

import { AntdResolver, MuiResolver } from 'unplugin-react-components'

Components({
  resolvers: [
    AntdResolver(),
    MuiResolver()
  ],
})

Custom Resolver

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')
      },
    })
  ]
})

sideEffects

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 />
  )
}