React-utils-com NPM

react-utils-com 是包含方法以及react组件库 hook的集合, 为了更方便开发

安装

npm i react-utils-com --save

方法

isEqual 判断数据是否相等
uuid 生成对应位数的uuid
text 用于获取文字的高度和宽度
uploadFile 文件上传前加密文件

isEqual(a , b)

import { isEqual } from "react-utils-com";

// a 和 b 可以使任意类型
console.log(isEqual(a , b));

uuid(number)

import { uuid } from "react-utils-com";

console.log(uuid(16)); //3faa399e94e27fc1

text({fontSize , text , ref? , fontFamily? })

import { text } from "react-utils-com";

const App = () => {

  const divRef = React.useRef(null);

  console.log(
    text({
      fontSize: "12px",
      text: "错误啊啊啊啊啊",
      ref: divRef.current || undefined,
  	})
  ); // {width: 84, height: 17}
  

  return (
    <div ref={divRef}>
      
    </div>
  );
};

uploadFile({ files, onprogress? , chunkSize? })

files 文件集合
onprogress: 加密进度（current, total, filesLength, currentLength , totalProgress） => {}
current: 当前分割文件的进度
total: 当前分割文件的总数
filesLength: 需要分割文件的个数
currentLength: 正在分割第几个文件
totalProgress: 每个文件的分割进度
chunkSize?: 分割大小默认 1024 * 1024

import { uploadFileMd5 } from "react-utils-com";

const App = () => {
  return (
    <div>
      <input type='file' multiple onChange={(e) => { 
          if(e.target.files && e.target.files.length > 0){
            uploadFileMd5({
              files: e.target.files as unknown as File[],
              onprogress: (current: number, total: number, filesLength: number, currentLength: number , totalProgress: any) => {
                console.log(current , total , filesLength,currentLength , totalProgress);
              },
              chunkSize: 1024 * 1024, // byte
            }).then(res => {
              console.log(res); // MD5
            })
          }
      }} />
    </div>
  );
};

事件总线

eventManager

import { eventManager } from "react-utils-com";

eventManager.on("click" , (content) => {
      console.log(content); // Math.random()
}) // 注册 click 事件

eventManager.once("utils" , (content) => {
      console.log(content); // Math.random()
}) // 注册 utils 单次 事件

eventManager.emit("click" , Math.random()); // 激活事件
eventManager.emitOnce("utils" , Math.random()); // 只激活一次 utils 事件


eventManager.off("utils" , () => {}); // 移除 utils 事件
eventManager.off("click" , eventManager.events["click"][0]); // 移除 总事件中click 事件 第一个事件


eventManager.back("click"); // 回退为上一次 click 事件 (废弃)

Hook

useTimeout

参数 useTimeout( timestamp? , fn? )
返回值：start 开始计时
stop 停止计时
计时停止后函数将不会继续执行
start 函数参数与 useTimeout 参数一致

import { useTimeout } from "react-utils-com";

const App = () => {

  
  const [ start , stop ] = useTimeout(1000 , () => console.log("error")); // 初始 1秒后 执行
	// 或者一下写法
	const [ start , stop ] = useTimeout(); // 初始不执行

  return (
    <div>
      <button onClick={(e) =>{
    		// 300 毫秒后执行 打印 123
        start(300 , () => {
          console.log('123');
        })
      }}>开始</button>
      <button onClick={(e) =>{
        stop();
      }}>结束</button>
    </div>
  );
};

3 years ago

3 years ago

3 years ago