@farmfe/plugin-react-components
On-demand components auto importing for React.
Installation
- npm
- yarn
- pnpm
Usage
@farmfe/plugin-react-components
is a Rust plugin, you only need to configure its package name in plugins
field in farm.config.ts
.
Features
- 💚 Supports React out-of-the-box.
- ✨ Supports both components and directives.
- 🏝 Tree-shakable, only registers the components you use.
- 🪐 Folder names as namespaces.
- 🦾 Full TypeScript support.
- 🌈 Built-in resolvers for popular UI libraries.
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
into this
Note By default this plugin will import components in the
src/components
path. You can customize it using thedirs
option.
TypeScript
To get TypeScript support for auto-imported components.
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 yourtsconfig.json
underinclude
.
Importing from UI Libraries
We have several built-in resolvers for popular UI libraries like Ant Design, Arco Design, and Material UI, where you can enable them by:
Supported Resolvers:
Configuration
The following show the default values of the configuration
component