npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@bale-utils/react-utils

v1.0.2

Published

React utils .

Downloads

10

Readme

React 前后端统一打包

设置私服

npm config set registry http://192.168.1.115:8081/nexus/content/repositories/react-pack-unify/
npm config set registry http://192.168.1.115:8081/nexus/content/repositories/npm-all/

开发规范

  1. less 统一使用 rem 去编写。

  2. 除 store 使用 class 外, 其余使用组件函数去编写。

  3. 编写 hook 时, 请参照 React Hook 规范。

  4. 所有页面样式以 xxx-page 开头, 以区别页面惟一。

  5. 所有的 store 都需要继承 BaseStore, new 一个 store 时需要使用 type 类型, 统一为 IXxxType, 定义需要导出的属性或方法, 定义属性请使用 interface, 统一为 IXxxProps 如下:

    export type IHomeType = {
      list: Array<any>
      getData: () => void
    }
    
    class HomeStore extends BaseStore {}
    
    const homeStore: IHomeType = new HomeStore()
    export default homeStore
  6. 编写组件时, 导出的属性统一用 interface, 命令为 IXxxxProps

  7. 页面里都使用 单引号, 结尾不需要写 ;

  8. 页面中获取属性, 如果需要判断为空, 请不要写 if 判断, 使用 ?, 如: response?.data

  9. 需要打印日志, 请不要使用 console.log, 使用 $log。

  10. 请移除未使用的代码。

  11. 所有的引入都使用 @ 符号, 请查看 tsconfig.path.json, 如在文件中不存在, 请联系添加。

  12. 请不要修改 stores/index.tsx, axios/index.tsx, request/request.tsx, src/index.tsx, layout/router/app.tsx, layout/router/router.interface.tsx 以及 require/config/* 文件。

  13. 请不要修改 eslint, postcss, husky, prettier, typescript 等相关配置文件。

  14. 请不要修改 script 下的 webpack 打包文件。

  15. 路由配置, 请写在 require/router 目录下, 请先在 router.url 中定义 url, 再在 router.tsx 中添加路由。

  16. git 代码提交请使用 ['feat', 'fix', 'update', 'docs', 'style', 'refactor', 'test', 'chore', 'release', 'revert'] 中的其中一个。

  17. ant design mobile 请参考 https://mobile.ant.design/index-cn

  18. 全局字体大小为 .41rem, less 全局变量使用 @font_middle

  19. 统一 toast 调用使用 $http.showToast(), 隐藏使用 $http.hideToast()

  20. 不允许在样式中文件中使用 &- 作为省略简称。