React Components 库

一个轻量级的 React 组件集合，提供常用的 UI 组件，便于在 React 项目中快速集成使用。

安装

npm install @a-drowned-fish/react-components

组件列表

| 组件名 | 描述 | | ------- | ------ | | Popup | 浮窗 | | Loading | 加载中 |

快速开始

import React from "react";
import { Popup, Loading } from "@a-drowned-fish/react-components";

function App() {
    return <div>{/* 使用组件 */}</div>;
}

组件文档

1. Popup 浮窗组件

一个灵活的弹出层组件，支持多种位置和动画效果。

属性

| 属性名 | 类型 | 默认值 | 描述 | | --------------- | --------------- | ----------------------- | ---------------------------------------- | | visible | boolean | false | 控制弹出层显示/隐藏 | | maskClosable | boolean | true | 点击遮罩是否可关闭 | | className | string | "" | 自定义类名 | | bg | string | "rgba(0, 0, 0, 0.3)" | 遮罩背景颜色 | | duration | number | 200 | 动画持续时间（毫秒） | | edge | PopupEdge | PopupEdge.BOTTOM | 弹出位置（TOP/BOTTOM/LEFT/RIGHT/CENTER） | | scaleWhenCenter | ScaleWhenCenter | { start: 0.75, end: 1 } | 当 edge 为 CENTER 时的缩放效果 | | onClose | () => void | - | 关闭回调函数 | | children | ReactNode | - | 弹出层内容 |

示例

import { useState } from "react";
import { Popup, PopupEdge } from "@a-drowned-fish/react-components";

function MyComponent() {
    const [visible, setVisible] = useState(false);

    return (
        <>
            <button onClick={() => setVisible(true)}>打开底部弹出</button>
            <Popup visible={visible} onClose={() => setVisible(false)} edge={PopupEdge.BOTTOM} duration={300}>
                <div style={{ padding: "20px", backgroundColor: "#fff" }}>
                    <h3>底部弹出内容</h3>
                    <button onClick={() => setVisible(false)}>关闭</button>
                </div>
            </Popup>
        </>
    );
}

2. Loading 加载组件

一个简单的加载指示器组件，可用于页面加载、数据请求等场景。

属性

| 属性名 | 类型 | 默认值 | 描述 | | ---------- | --------- | ------ | --------------------- | | visible | boolean | false | 控制加载动画显示/隐藏 | | bg | string | - | 遮罩背景颜色 | | size | number | 30 | 加载图标大小 | | color | string | - | 加载图标颜色 | | injectBody | boolean | true | 是否注入到 body 元素 | | children | ReactNode | - | 自定义加载内容 |

示例

import { useState } from "react";
import { Loading } from "@a-drowned-fish/react-components";

function MyComponent() {
    const [loading, setLoading] = useState(false);

    const fetchData = () => {
        setLoading(true);
        // 模拟数据请求
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    };

    return (
        <>
            <button onClick={fetchData}>加载数据</button>
            <Loading visible={loading} bg="rgba(255, 255, 255, 0.8)" size={40} color="#1890ff" />
        </>
    );
}