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 🙏

© 2024 – Pkg Stats / Ryan Hefner

lhhu-react

v0.1.17

Published

## Install

Downloads

4

Readme

lhhu-react

Install

npm install --save lhhu-react

Usage

import React  from 'react'

import {BaseViewComponent,LoadingDialog} from  'lhhu-react'
export default class App extends BaseViewComponent {

  componentDidMount() {


  }

  _addDialog=()=>{
      LoadingDialog.show({
          loadingTitle:'加载中。。。',
          hitBackgroundHidden:true,
          loadingImage:require('./loading.gif')
      })
  }

  render() {
    return(
        <div className={'fullScreen'} style={{}}>

            <button onClick={this._addDialog}>test button</button>
            <div>{this._moduleId}</div>
            <div>{window.__Device__}</div>
            <div>IS_IPHONE_X: {window.IS_IPHONE_X?1:0}</div>
        </div>
    )
  }
}

License

MIT © lhhu-react

介绍

  • AZTool,

    • AZTool.isNull_Undefined 判空
    • AZTool.isArray 判断是否为数组
    • AZTool.isString 判断是否为string
    • AZTool.isNumber 判断是否为Number
    • AZTool.isDate 判断是否为Date
    • AZTool.isFunction 判断是否为Function
    • AZTool.isObject 判断是否为Object
    • AZTool.isNotEmptyString 非空String
    • AZTool.isNotEmptyArray 非空Array
    • AZTool.dateTransform 日期格式化dateTransform
    • AZTool.randomString 随机字符串randomString
  • md5,

  • Loadable 组建懒加载

  • AppEventEmitter, app 事件通知,全局使用

    	AppEventEmitter.addListener(BasePage.APP_BG_COLOR_CHANGE_EVENT,this.updateBgThemeColor);
    	AppEventEmitter.removeListener(BasePage.APP_BG_COLOR_CHANGE_EVENT,this.updateBgThemeColor)
    	AppEventEmitter.emit(BasePage.APP_BG_COLOR_CHANGE_EVENT,{opt:'opt'})
    
  • AZAppTimer,

    共用一个(每一秒触发的)定时器触发回调,自身管理定时器的创建和销毁
    使用者只要添加定时器的方法,和移除定时器的方法即可
    节省定时器的资源
    **当定时器中的回调方法全部移除时,会释放定时器**
      
    componentDidMount() {
        AZAppTimer.addTimerListener(this._calTimer) //在定时器中添加定时器回调的方法
    }
    
    componentWillUnmount() {
        AZAppTimer.removeTimerListener(this._calTimer)//在定时器中移除定时器回调的方法
    }
    // 回调方法
    _calTimer = ()=>{
        this.setState({
            time:this._getTimerStr()
        })
    }
      
  • BaseViewComponent,

    • BaseViewComponent
  • DialogBase

    • 弹窗的父类,这个主要是为了提供一个思路

    • 在react 中model的实现方法基本是(大家去网上找),导致使用的形式为<Model>...</Model>这种形式,在使用的过程中较为麻烦,DialogBase该类实现了一种静态方法调用弹窗的实现

      import { LoadingDialog } from 'lhhu-react'
      LoadingDialog.show({})
  • LoadingDialog

    import { LoadingDialog } from 'lhhu-react'
    LoadingDialog.show({})
  • AZCatch 捕捉全局异常

    
    	import { AZCatch } from 'lhhu-react'
    	// 开启错误捕捉
    	AZCatch.useCatch((err,info)=>{
    		// 这里可以把异常上传,监听线上问题
    		console.log('\n hulinhua--------haha----11-',err);
    	})
    	//window 是Window 单例实例
    	// 绑定到window上方便全局使用,不需要引入AZCatch,当然也可以直接使用AZCatch.globalTryCatch
    	window.globalTryCatch = AZCatch.globalTryCatch
    	window.globalPromis = AZCatch.globalPromis
    
    	/**
    	 AZCatch.globalTryCatch(()=>{
    		// code
    		},err=>{
    			// 错误处理
    	})
    
    	// 或者
    	window.globalTryCatch(()=>{
    			// code
    		},err=>{
    			// 错误处理
    	})
    	*/