Pingk React Component Lib

一个基于 React + TypeScript + Vite 构建的轻量级组件库。

✨ 特性

• 📦 开箱即用，支持 NPM 安装和 CDN 引入
• 🦕 完全使用 TypeScript 编写，提供完整的类型定义
• ⚡️ 基于 Vite 构建，支持 ESM 和 UMD 格式
• 🎨 内置 BEM 规范的 Sass 样式

📦 安装

使用包管理器

# npm
npm install pingk-react-component-lib

# pnpm
pnpm add pingk-react-component-lib

# yarn
yarn add pingk-react-component-lib

浏览器直接引入 (CDN)

你也可以直接通过 CDN 引入 UMD 格式的文件：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/pingk-react-component-lib/dist/index.css">

<!-- 引入依赖 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- 引入组件库 -->
<script src="https://unpkg.com/pingk-react-component-lib/dist/index.umd.cjs"></script>

🔨 快速上手

在 React 项目中使用

import { useState } from 'react';
import { MyButton, MyRadio } from 'pingk-react-component-lib';
// 如果构建工具没有自动处理 CSS注入，可能需要手动引入（视具体配置而定）
// import 'pingk-react-component-lib/dist/index.css';

function App() {
  const [radioValue, setRadioValue] = useState('1');

  return (
    <div>
      <h2>Button 示例</h2>
      <MyButton
        label="点击我"
        variant="primary"
        onClick={() => alert('Clicked!')}
      />

      <h2>Radio 示例</h2>
      <MyRadio
        label="选项 A"
        name="group1"
        value="1"
        checked={radioValue === '1'}
        onChange={(e) => setRadioValue(e.target.value)}
      />
      <MyRadio
        label="选项 B"
        name="group1"
        value="2"
        checked={radioValue === '2'}
        onChange={(e) => setRadioValue(e.target.value)}
      />
    </div>
  );
}

📚 组件文档

MyButton

基础按钮组件。

| 属性 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | label | string | 必填 | 按钮显示的文本内容 | | variant | 'primary' \| 'default' | 'default' | 按钮样式变体 | | disabled | boolean | false | 是否禁用按钮 | | onClick | (event: React.MouseEvent) => void | - | 点击事件回调 | | ...props | React.ButtonHTMLAttributes | - | 其他原生 button 属性 |

MyRadio

单选框组件。

| 属性 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | label | string | - | 单选框右侧的标签文本 | | checked | boolean | - | 是否选中 | | disabled | boolean | false | 是否禁用 | | onChange | (event: React.ChangeEvent) => void | - | 状态改变回调 | | ...props | React.InputHTMLAttributes | - | 其他原生 input[type="radio"] 属性 |

💻 本地开发

如果你想参与本项目开发，请参考 开发指南。

# 克隆项目
git clone https://github.com/your-repo/pingk-react-component-lib.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 运行测试
pnpm test

📄 License

MIT