Adding Your Component

This section guides you through adding a custom component to Yao. You can use it in your application to create custom interfaces and widgets. ## Step 1: Clone the XGEN Repository To add a custom component, you need to clone the XGEN repository to your local machine. XGEN is the default interface engine for building admin panels in Yao. ```bash # Clone the XGEN repository git clone https://github.com/yaoapp/xgen.git /your/directory/xgen ``` ## Step 2: Run the XGEN development You need start the yao http server, it's the backend server for the xgen development server. ```bash cd /path/to/your/project yao start ``` Then you can start the xgen development server. ```bash cd /your/directory/xgen pnpm install pnpm dev ``` Through the xgen dev server to visit admin panel. ## Step 3: Create a New Component Reference the Input component code to implement your own component. Place the component in the `packages/xgen/components/edit` folder. 👉 [packages/xgen/components/edit/Input](https://github.com/YaoApp/xgen/blob/main/packages/xgen/components/edit/Input/index.tsx) ```tsx // packages/xgen/components/edit/YourComponent/index.tsx import { Input } from "antd"; import { Item } from "@/components"; import { getLocale } from "@umijs/max"; import type { InputProps } from "antd"; import type { Component } from "@/types"; interface IProps extends InputProps, Component.PropsEditComponent {} const Index = (props: IProps) => { const { __bind, __name, itemProps, ...rest_props } = props; const is_cn = getLocale() === "zh-CN"; return ( ); }; export default window.$app.memo(Index); ``` ## Step 4: Use the Component ```json // ... { "edit": { "type": "YourComponent", "props": { // ... } } } // ... ``` ## Step 5: Build the Component Library To build the component library, you need to run the following command: ```bash cd /your/directory/xgen pnpm build ``` After building the component library, place the compiled files in the `public` directory, or host them on a CDN.