Happy-react-hooks NPM

描述

happy-react-hooks 是一个 React Hook 工具库。

Hooks 目录

hooks
├─ useAutoFit.js
└─ useWebSocket.js

Hooks 介绍

1. useAutoFit

介绍

一个用来自适应多屏幕的 Hook。

import { useAutoFit } from 'happy-react-hooks';

const App = () => {
  useAutoFit(1920, 1080, 'screen');

  return (
    <div style={{ backgroundColor: 'red' }} id='screen'>
      测试
    </div>
  );
};
render(<App />, document.getElementById('root'));

入参

属性	描述	类型	默认值
width	设计稿宽度	number	1920
height	设计稿高度	object	1080
screenDom	用来缩放的 dom 元素，一般是根元素	string / dom 元素	"root"
debounceInterval	防抖时间间隔, 避免频繁触发	number	0

返回值

返回值为空

2. useWebSocket

介绍

封装 websocket 操作的 Hook。

import { useWebSocket } from 'happy-react-hooks';

const WEBSOCKET_URL = 'ws://10.2.2.224:8888';

export default function WebsocketDemo() {
  const { readyState, message, sendMessage } = useWebSocket(WEBSOCKET_URL, {
    interval: 60 * 1000, // 心跳时间间隔
    send: 'heartBeat', // 心跳时候发送给服务端的数据
    res: 'still in connect', // 心跳连接正常收到服务端的数据
    timeout: 15 * 1000 // 超时时间，如果发送完数据15秒内没有收到服务端的响应(still in connect)，就认为已断开连接，则重新连接
  });

  useEffect(() => {
    if (readyState === 1) {
      sendMessage('connect ok');
    }
  }, [readyState]);

  useEffect(() => {
    console.log('message', message);
  }, [message]);

  // ...
}

入参

属性	描述	类型	默认值
url	websocket 地址	string	无默认值，不可为空
heartBeatOptions	心跳参数，为空表示不使用心跳。 {interval: 心跳间隔, send: 发送内容, res: 服务端返回内容， timeout: 超时时间，超过这个时间说明连接已断开，则会重新连接}	object	默认为空

返回值

属性	描述	类型
readyState	websocket 状态的 readyState, 1 代表连接成功，3 代表已关闭。是一个 React state，可以 useEffect 直接监听	React state
message	接收到的数据, 是一个 React state，可以 useEffect 直接监听	React state
sendMessage	向服务端发送数据的方法	object

react-hooks useWebSocket useAutoFit hooks

@everything-registry/sub-chunk-1826

0.0.3

11 months ago

0.0.2

11 months ago

0.0.1

11 months ago