open-index/open-npm huggingface dataset:
npm package: @rc-hooks/dialog
Description: ## API 属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ show | 是否显示，可选 | boolean | `false` getContainer | 获取父容器的方法，可选，如果不传默认是`document.body` | function | - mask | 是否显示遮罩层，可选 | boolean | `false` maskClassName | mask的className，可选 | string | - onMaskClick | mask点
Latest version: 1.0.11

# Dialog 一 定位

## API
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
show | 是否显示，可选 | boolean | `false`
getContainer | 获取父容器的方法，可选，如果不传默认是`document.body` | function | -
mask | 是否显示遮罩层，可选 | boolean | `false`
maskClassName | mask的className，可选 | string | -
onMaskClick | mask点击事件，可选 | function | -
zIndex | style.zIndex，可选 | number | -
children | 浮层内容，可选 | React.ReactNode | -
& IRcPosition | position相关配置，参考`IRcPosition`定义 | - | -

## IRcPosition 定义
IRcPosition一共分成 16种情况，横纵方向 4 * 4
```typescript jsx
    export type IRcPositionHorizontal = 'left' | 'center' | 'right' | 'dock';

    export type IRcPositionVertical = 'top' | 'center' | 'bottom' | 'dock';

    interface IRcHorizontal {
        horizontal: IRcPositionHorizontal;
        left?: number;
        right?: number;
    }

    interface IRcVertical {
        vertical: IRcPositionVertical;
        top?: number;
        bottom?: number;
    }

    export type IRcPosition = IRcHorizontal & IRcVertical;
```

## 用法
```typescript jsx
    import React, {useState, useRef} from 'react';
    import {RcDialog} from '../src';
    import {useContainer} from '@co-hooks/util';
    import {Button} from '../../ui';

    export default (props: {}) => {
        const divRef = useRef<HTMLDivElement>(null);

        const [show, setshow] = useState(false);

        const getContainer = useContainer(divRef);

        const maskStyle = {
            background: 'rgba(0, 0, 0, .2)'
        };

        return (
            <div>
                <Button onClick={() => setshow(true)} >指定父级</Button>

                <div className="refDiv" ref={divRef} style={{width: '200px', height: '200px', border: '1px solid #ccc'}}>
                    有内容的div
                </div>

                <RcDialog
                    show={show}
                    getContainer={getContainer}
                    horizontal="center"
                    vertical="center"
                    mask={true}
                    onMaskClick={() => setshow(false)}
                    maskStyle={maskStyle}
                >
                    我是用了指定父级的浮层
                </RcDialog>
            </div>
        );
    };
```
npm package: @rc-hooks/dom
Description: util functions and types for rc-hooks
Latest version: 1.0.11

# Dom - Dom相关Hooks和操作函数

## useWindowSize
监控窗体大小变化

* 定义 `function useWindowSize(onResize?: ResizeHandler): IElementSize `
* 类型
    - `type ResizeHandler = (size: IElementSize) => void`
    - `interface IElementSize {width: number; height: number;}`
* 用法
    ```typescript jsx
    import React from 'react'
    import {useWindowSize, IElementSize} from '@co-hooks/util'

    interface IDemoProps {
        onChange: (size: IElementSize) => void
    }

    function DemoComponent(props: IDemoProps) {

        const size = useWindowSize(props.onChange);

        return (
            <div>{size.width} * {size.height}</div>
        )
    }
    ```

## getZIndex
获取一个新的用于展示的zIndex，建议弹层每次show的时候，更新一下，保证不被挡住

* 定义 `function getZIndex(): number`
* 用法
    ```typescript jsx
    import React from 'react'
    import {getZIndex} from '@co-hooks/util'

    function DemoComponent() {

        const zIndex = getZIndex();

        return (
            <div style={{zIndex}}/>
        )
    }

    ```
npm package: @rc-hooks/mask
Description: ## API 属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ show | 是否显示，可选 | boolean | `false` className | class字符串，可选 | string | `''` style | 样式扩展，可以选 | [key: string]: React.CSSProperties | `{}`
Latest version: 1.0.11

# RcMask 一 遮罩层

## API
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
show | 是否显示，可选 | boolean | `false`
className | class字符串，可选 | string | `''`
style | 样式扩展，可以选 | [key: string]: React.CSSProperties | `{}`

可透传其他div的属性到mask外壳容器上，如onClick等
npm package: @rc-hooks/mem-cache
Description: ## API 属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ show | 是否显示，可选 | boolean | `false` className | class字符串，可选 | string | `''` style | 样式扩展，可以选 | [key: string]: React.CSSProperties | `{}`
Latest version: 0.1.81

# RcMask 一 遮罩层

## API
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
show | 是否显示，可选 | boolean | `false`
className | class字符串，可选 | string | `''`
style | 样式扩展，可以选 | [key: string]: React.CSSProperties | `{}`

可透传其他div的属性到mask外壳容器上，如onClick等
npm package: @rc-hooks/nest-watcher
Description: ## API 属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ show | 是否显示，可选 | boolean | `false` className | class字符串，可选 | string | `''` style | 样式扩展，可以选 | [key: string]: React.CSSProperties | `{}`
Latest version: 0.1.81

# RcMask 一 遮罩层

## API
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
show | 是否显示，可选 | boolean | `false`
className | class字符串，可选 | string | `''`
style | 样式扩展，可以选 | [key: string]: React.CSSProperties | `{}`

可透传其他div的属性到mask外壳容器上，如onClick等
npm package: @rc-hooks/portal
Description: ## API 属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ getContainer | 获取父容器的方法，可选，如果不传默认是`document.body` | function | - children | 传送门内容 | ReactNode | - onUpdated | updated方法回调，用于准确获取传送门内的dom元素 | () => void | -
Latest version: 1.0.11

# Portal 一 传送门

## API
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
getContainer | 获取父容器的方法，可选，如果不传默认是`document.body` | function | -
children | 传送门内容 | ReactNode | -
onUpdated | updated方法回调，用于准确获取传送门内的dom元素 | () => void | -
npm package: @rc-hooks/priority-queue
Description: ## API 属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ show | 是否显示，可选 | boolean | `false` className | class字符串，可选 | string | `''` style | 样式扩展，可以选 | [key: string]: React.CSSProperties | `{}`
Latest version: 0.1.81

# RcMask 一 遮罩层

## API
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
show | 是否显示，可选 | boolean | `false`
className | class字符串，可选 | string | `''`
style | 样式扩展，可以选 | [key: string]: React.CSSProperties | `{}`

可透传其他div的属性到mask外壳容器上，如onClick等
npm package: @rc-hooks/util
Description: util functions and types for rc-hooks
Latest version: 0.1.81

# RcUtil - 工具函数、通用类型
这里包含了很多通用的小函数和通用的类型定义

## guid
生成一个全局唯一的字符串，如果需要id在每一次请求的时候不变，需要要useMemo。


* 定义 `function guid(): string`
* 用法
    ```typescript jsx
    import React, {useMemo} from 'react'
    import {guid} from '@rc-hooks/util'
  
    function DemoComponent() {
    
        const id = useMemo(() => guid(), []);
      
        return (
            <div id={id}/> 
        )
    }    
    ```
     
## type
获取一个变量的系统预设类型，不推荐使用此函数，因为他会影响typescript的类型推导。
对于基础类型建议使用typeof，对于系统类型，比如数组，用Array.isArray，
这样可以获取更好的typescript支持。

* 定义 `function type(obj: any): string`
* 用法
    ```typescript jsx
    import {type} from '@rc-hooks/util'

    type(1); // number
    type(''); // string
    type(Date.now()) // date
    ```
    
## clone
克隆一个可以转换为json的对象，使用了内置的api。
使用JSON.stringify来实现的复制。

* 定义 `function clone<T>(obj: T): T`
* 泛型参数
    - T 表示分组要克隆值的类型，通常不需要传递，利用TypeScript推导

* 用法
    ```typescript jsx
    import {clone} from '@rc-hooks/util'

    clone(1); // 1
    clone('abc'); // abc
    ```
## deepClone
克隆任何对象，支持函数等非JSON类型

* 定义 `function deepClone<T>(obj: T): T`
* 泛型参数
    - T 表示分组要克隆值的类型，通常不需要传递，利用TypeScript推导
* 用法
    ```typescript jsx
    import {deepClone} from '@rc-hooks/util'

    deepClone(1); // 1
    deepClone('abc'); // abc
    const fn = deepClone(() => 1); 
    fn() // 1
    ```
## UnionOmit
一个安全的交叉类型，UnionOmit会交叉两个类型，当名称有冲突的时，选取第一个，而不是报错。


* 定义 `UnionOmit<T, K> = T & Omit<K, keyof T>`
* 用法
    ```typescript
    
        import {UnionOmit} from '@rc-hooks/util'
      
        interface Demo {
            foo: string;
            bar: string;
        }
      
        interface Other {
            foo: number;
            baz: string;
        }
        
        type DemoUnionOther = UnionOmit<Demo, Other> // {foo: sting, bar: string; baz: string}
        type OtherUnionDemo = UnionOmit<Other, Demo> // {foo: number, bar: string; baz: string}
    ```
npm package: @rc-hooks/validate
Description: validate functions
Latest version: 0.1.81

# RcUtil - 工具函数、通用类型
这里包含了很多通用的小函数和通用的类型定义

## guid
生成一个全局唯一的字符串，如果需要id在每一次请求的时候不变，需要要useMemo。


* 定义 `function guid(): string`
* 用法
    ```typescript jsx
    import React, {useMemo} from 'react'
    import {guid} from '@rc-hooks/util'
  
    function DemoComponent() {
    
        const id = useMemo(() => guid(), []);
      
        return (
            <div id={id}/> 
        )
    }    
    ```
     
## type
获取一个变量的系统预设类型，不推荐使用此函数，因为他会影响typescript的类型推导。
对于基础类型建议使用typeof，对于系统类型，比如数组，用Array.isArray，
这样可以获取更好的typescript支持。

* 定义 `function type(obj: any): string`
* 用法
    ```typescript jsx
    import {type} from '@rc-hooks/util'

    type(1); // number
    type(''); // string
    type(Date.now()) // date
    ```
    
## clone
克隆一个可以转换为json的对象，使用了内置的api。
使用JSON.stringify来实现的复制。

* 定义 `function clone<T>(obj: T): T`
* 泛型参数
    - T 表示分组要克隆值的类型，通常不需要传递，利用TypeScript推导

* 用法
    ```typescript jsx
    import {clone} from '@rc-hooks/util'

    clone(1); // 1
    clone('abc'); // abc
    ```
## deepClone
克隆任何对象，支持函数等非JSON类型

* 定义 `function deepClone<T>(obj: T): T`
* 泛型参数
    - T 表示分组要克隆值的类型，通常不需要传递，利用TypeScript推导
* 用法
    ```typescript jsx
    import {deepClone} from '@rc-hooks/util'

    deepClone(1); // 1
    deepClone('abc'); // abc
    const fn = deepClone(() => 1); 
    fn() // 1
    ```
## UnionOmit
一个安全的交叉类型，UnionOmit会交叉两个类型，当名称有冲突的时，选取第一个，而不是报错。


* 定义 `UnionOmit<T, K> = T & Omit<K, keyof T>`
* 用法
    ```typescript
    
        import {UnionOmit} from '@rc-hooks/util'
      
        interface Demo {
            foo: string;
            bar: string;
        }
      
        interface Other {
            foo: number;
            baz: string;
        }
        
        type DemoUnionOther = UnionOmit<Demo, Other> // {foo: sting, bar: string; baz: string}
        type OtherUnionDemo = UnionOmit<Other, Demo> // {foo: number, bar: string; baz: string}
    ```