Skip to main content

LynKit 介绍

LynKit 是一个现代化的 React 组件库,专为构建优雅、高效的用户界面而设计。它提供了丰富的 UI 组件、实用 Hooks、API 工具函数和图标系统,帮助开发者快速构建专业级应用。

特性

  • 🎨 精美的设计 - 遵循现代设计理念,组件美观且易用
  • 📦 开箱即用 - 无需复杂配置,安装即可使用
  • 🛠️ 高度可定制 - 支持主题定制、样式覆盖和功能扩展
  • 📝 详细的文档 - 提供完整的文档和示例代码
  • 🔧 TypeScript 支持 - 完整的类型定义,提供优秀的开发体验
  • 🧩 模块化结构 - 可按需引入,降低应用体积
  • 🔄 持续更新 - 定期维护和更新,确保兼容性和安全性

技术栈

LynKit 基于以下技术构建:

  • React - 使用最新的 React 特性,包括 Hooks、Context 等
  • TypeScript - 提供完整的类型定义,增强代码质量和开发体验
  • CSS-in-JS - 使用现代 CSS 解决方案,提供灵活的样式定制
  • Jest & Testing Library - 完善的测试覆盖,确保组件质量
  • Storybook - 组件开发和文档工具,提供交互式示例

安装

# 使用 npm
npm install @lynkit/ui @lynkit/hooks @lynkit/icons @lynkit/api

# 使用 yarn
yarn add @lynkit/ui @lynkit/hooks @lynkit/icons @lynkit/api

# 使用 pnpm
pnpm add @lynkit/ui @lynkit/hooks @lynkit/icons @lynkit/api

你也可以单独安装需要的包:

npm install @lynkit/ui  # 仅安装UI组件

快速上手

基础示例

import { Button } from '@lynkit/ui';
import { useSetState } from '@lynkit/hooks';
import { IconHome } from '@lynkit/icons';

function App() {
const [state, setState] = useSetState({
count: 0,
loading: false
});

const handleClick = () => {
setState({ loading: true });

// 模拟异步操作
setTimeout(() => {
setState({
count: state.count + 1,
loading: false
});
}, 1000);
};

return (
<div>
<h1>计数器: {state.count}</h1>
<Button
type="primary"
loading={state.loading}
onClick={handleClick}
>
<IconHome /> 增加计数
</Button>
</div>
);
}

模块化使用

LynKit 采用模块化设计,可以只引入所需的组件:

// 仅导入所需的组件
import { Button, Input, Modal } from '@lynkit/ui';
import { useSetState, useInterval } from '@lynkit/hooks';
import { debounce } from '@lynkit/api';

版本和兼容性

LynKit 要求 React 16.8.0 或更高版本,以支持 React Hooks 功能。

当前版本:

  • @lynkit/ui: v1.0.0
  • @lynkit/hooks: v1.0.0
  • @lynkit/icons: v1.0.0
  • @lynkit/api: v1.0.0

浏览器支持

LynKit 支持所有现代浏览器,包括:

  • Edge >= 91
  • Firefox >= 78
  • Chrome >= 90
  • Safari >= 14
  • Opera >= 76
  • iOS >= 14.4

贡献指南

我们欢迎社区贡献!如果你想为 LynKit 贡献代码,请查看我们的 贡献指南

许可证

LynKit 使用 MIT 许可证