cover-hooks使用与开发规范
- 致力于打造最全的react hooks行为库
- 此hook库源码使用typescript实现
- 此hook库分为两部分,componet hooks 和 tool hooks
- 当hook库到达一定规模的时候,我会单独开一个示例站点,供大家参考
componet hooks
- 此为组件hook,原本class组件,代码繁重,生命周期处理复杂,性能优化麻烦,操作不够便捷
- 组件操作与组件本身属性分离,组件只表现UI层,造作交给hook实现
useDragModal 可拖拽位置modal框
解决问题
- 实现任意位置拖放
- 按钮自动加载loading
- 完全实现animate.css动画过度
- 初始位置自定义
使用
import React from 'react';
import {useDragModal} from 'cover-hooks';
const MyModal = () => {
const {triggerVisible, Modal, open, close} = useDragModal({
animate: 'bounceUp',
isMask: false,
width: 600,
supperClose: true,
title: 'Cover IT',
draggable: false,
defaultPosition: 'right',
})
return (
<div>
<button onClick={() => {open()}}></button>
<Modal>
我是body
</Modal>
</div>
)
}
属性
interface IUseDragModalProps {
visible?: boolean;
animate?: Animate,
isMask?: boolean;
height?: number | string;
width?: number | string;
title?: string | React.ReactElement;
footer?: string | React.ReactElement;
closeTime?: number;
defaultPosition?: 'left' | 'right' | 'center';
draggable?: boolean;
supperClose?: boolean;
onOk?: () => void
}
Hooks
interface IUseDragModalReturn {
Modal: React.FC;
triggerVisible: () => void;
visible: boolean;
open: () => void;
close: () => void;
recoverPosition: () => void;
loadingFunc: (func:()=>any) => any;
}
tool hooks
useWindowSize 实时过去页面窗口的大小
解决问题
- 每次要监听页面变化的时候都要绑定resize事件
- 还要重新调用原生方法获取大小
使用
import React, {useEffect} from 'react';
import {useWindowSize} from 'cover-hooks';
const WindowS = () => {
const windowSize = useWindowSize();
useEffect(() => {
}, [windowSize]);
return ''
}
Hooks
interface IUseWindowSizeReturn {
width: number;
height: number;
}
useLoading调用异步接口的loading状态
解决问题
使用
import React, {useEffect} from 'react';
import {Button} from 'antd';
import {useLoading} from 'cover-hooks';
const ButtonLoading = () => {
const {loading, loadingFunc} = useLoading()
const getData = async () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('aaa');
}, 3000)
})
}
const handleClick = async () => {
let res = await loadingFunc(getData)
}
return (
<div>
<Button loading={loading} onClick={handleClick}></Button>
</div>
)
}
Hooks
interface IUseLoadingReturn {
loadingFunc: (func: ()=>any)=>any;
loading: boolean;
}
useWait 等待过程控制
解决问题
- 状态由一种情况过度到另一种情况,又可以变变化回来
- 适用于css动画切换过度
使用
import React from 'react';
import useWait from '../tools/useWait/index';
const Test = () => {
const {wait, toggleWait} = useWait({});
return (
<div>
{
wait !== 'E' &&
(
<div
className={`animated ${wait === 'ES' ? 'bounceIn' : (wait === 'SE' ? 'bounceOut' : '')}`}
style={{
width: 100,
height: 100,
background: 'red'
}} />
)
}
</div>
)
}
props
export interface IWaitProps {
defaultValue?: 'S' | 'E',
time?: number;
}
hooks
type waitType = 'S' | 'E' | 'SE' | 'ES'
export interface IWaitReturn {
wait: waitType,
toggleWait: () => void;
startToEnd: () => void;
endToStart: () => void;
}