GreatJoy Hooks

一套封装了常用功能的 React Hooks 库，提供了 URL 参数获取、样式动态注入和组件属性增强等功能。该库专注于解决 React 开发中的常见问题，帮助开发者提高开发效率。

特性

• 🪝 实用 Hooks: 提供常用的自定义 Hooks，简化复杂逻辑
• 🔧 轻量级: 专注于核心功能，不添加不必要的依赖
• 📦 易于使用: 简单直观的 API 设计，开箱即用
• 🛡️ TypeScript 支持: 完整的 TypeScript 类型定义，提供更好的开发体验
• 🔄 按需导入: 支持 tree-shaking，只打包你使用的功能

安装

使用 npm 安装：

npm install greatjoy-hooks

或者使用 yarn：

yarn add greatjoy-hooks

使用方法

基础使用

import { getParameterByName, useInjectStyles, attachPropsToComponent } from 'greatjoy-hooks';

getParameterByName - 获取 URL 参数

从 URL 查询参数或 hash 中获取指定参数值。

// 获取 URL 查询参数
const userId = getParameterByName('userId');

// 获取 URL hash 参数
const token = getParameterByName('token', true);

useInjectStyles - 动态样式注入

将样式动态注入到文档中，避免重复注入，特别适用于组件库开发。

import styles from './Component.module.css';
import { useInjectStyles } from 'greatjoy-hooks';

function MyComponent() {
  useInjectStyles(styles, 'MyComponent');
  
  return <div className="my-component">Hello World</div>;
}

attachPropsToComponent - 组件属性增强

给 React 组件附加额外属性（如静态方法、子组件、常量等）。

import MyComponent from './MyComponent';
import SubComponent from './SubComponent';

const EnhancedComponent = attachPropsToComponent(MyComponent, {
  Sub: SubComponent,
});

// 使用方式
// <EnhancedComponent />
// <EnhancedComponent.Sub />

样式引入方式

自动引入（推荐）

使用 useInjectStyles Hook 自动注入样式，无需手动引入 CSS 文件：

import styles from './Component.module.css';
import { useInjectStyles } from 'greatjoy-hooks';

function MyComponent() {
  useInjectStyles(styles, 'MyComponent');
  // 组件逻辑...
}

手动引入

如果需要手动引入样式文件：

// 在你的应用入口文件中引入样式
import 'greatjoy-hooks/dist/index.min.css';

构建和打包

本库使用 Vite 进行构建和打包，代码经过混淆处理，外部使用者只能看到类型定义而无法查看具体实现代码。构建配置已经优化，确保打包后的代码具有良好的压缩率和安全性。

License

MIT