# rc-util
Common Utils For React Component.
[![NPM version][npm-image]][npm-url]
[![David dm][david-dm-image]][david-dm-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/rc-util.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-util
[travis-image]: https://img.shields.io/travis/react-component/util.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/util
[coveralls-image]: https://img.shields.io/coveralls/react-component/util.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/util?branch=master
[david-dm-image]: https://img.shields.io/david/react-component/util.svg
[david-dm-url]: https://david-dm.org/react-component/util
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-util.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-util
## Install
[](https://npmjs.org/package/rc-util)
## API
### createChainedFunction
> (...functions): Function
Create a function which will call all the functions with it's arguments from left to right.
```jsx
import createChainedFunction from 'rc-util/lib/createChainedFunction';
```
### deprecated
> (prop: string, instead: string, component: string): void
Log an error message to warn developers that `prop` is deprecated.
```jsx
import deprecated from 'rc-util/lib/deprecated';
```
### getContainerRenderMixin
> (config: Object): Object
To generate a mixin which will render specific component into specific container automatically.
```jsx
import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin';
```
Fields in `config` and their meanings.
| Field | Type | Description | Default |
|-------|------|-------------|---------|
| autoMount | boolean | Whether to render component into container automatically | true |
| autoDestroy | boolean | Whether to remove container automatically while the component is unmounted | true |
| isVisible | (instance): boolean | A function to get current visibility of the component | - |
| isForceRender | (instance): boolean | A function to determine whether to render popup even it's not visible | - |
| getComponent | (instance, extra): ReactNode | A function to get the component which will be rendered into container | - |
| getContainer | (instance): HTMLElement | A function to get the container | |
### Portal
Render children to the specific container;
```jsx
import Portal from 'rc-util/lib/Portal';
```
Props:
| Prop | Type | Description | Default |
|-------|------|-------------|---------|
| children | ReactChildren | Content render to the container | - |
| getContainer | (): HTMLElement | A function to get the container | - |
### getScrollBarSize
> (fresh?: boolean): number
Get the width of scrollbar.
```jsx
import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
```
### guid
> (): string
To generate a global unique id across current application.
```jsx
import guid from 'rc-util/lib/guid';
```
### pickAttrs
> (props: Object): Object
Pick valid HTML attributes and events from props.
```jsx
import pickAttrs from 'rc-util/lib/pickAttrs';
```
### warn
> (msg: string): void
A shallow wrapper of `console.warn`.
```jsx
import warn from 'rc-util/lib/warn';
```
### warning
> (valid: boolean, msg: string): void
A shallow wrapper of [warning](https://github.com/BerkeleyTrue/warning), but only warning once for the same message.
```jsx
import warning, { noteOnce } from 'rc-util/lib/warning';
warning(false, '[antd Component] test hello world');
// Low level note
noteOnce(false, '[antd Component] test hello world');
```
### Children
A collection of functions to operate React elements' children.
#### Children/mapSelf
> (children): children
Return a shallow copy of children.
```jsx
import mapSelf from 'rc-util/lib/Children/mapSelf';
```
#### Children/toArray
> (children: ReactNode[]): ReactNode[]
Convert children into an array.
```jsx
import toArray from 'rc-util/lib/Children/toArray';
```
### Dom
A collection of functions to operate DOM elements.
#### Dom/addEventlistener
> (target: ReactNode, eventType: string, listener: Function): { remove: Function }
A shallow wrapper of [add-dom-event-listener](https://github.com/yiminghe/add-dom-event-listener).
```jsx
import addEventlistener from 'rc-util/lib/Dom/addEventlistener';
```
#### Dom/canUseDom
> (): boolean
Check if DOM is available.
```jsx
import canUseDom from 'rc-util/lib/Dom/canUseDom';
```
#### Dom/class
A collection of functions to operate DOM nodes' class name.
* `hasClass(node: HTMLElement, className: string): boolean`
* `addClass(node: HTMLElement, className: string): void`
* `removeClass(node: HTMLElement, className: string): void`
```jsx
import cssClass from 'rc-util/lib/Dom/class;
```
#### Dom/contains
> (root: HTMLElement, node: HTMLElement): boolean
Check if node is equal to root or in the subtree of root.
```jsx
import contains from 'rc-util/lib/Dom/contains';
```
#### Dom/css
A collection of functions to get or set css styles.
* `get(node: HTMLElement, name?: string): any`
* `set(node: HTMLElement, name?: string, value: any) | set(node, object)`
* `getOuterWidth(el: HTMLElement): number`
* `getOuterHeight(el: HTMLElement): number`
* `getDocSize(): { width: number, height: number }`
* `getClientSize(): { width: number, height: number }`
* `getScroll(): { scrollLeft: number, scrollTop: number }`
* `getOffset(node: HTMLElement): { left: number, top: number }`
```jsx
import css from 'rc-util/lib/Dom/css';
```
#### Dom/focus
A collection of functions to operate focus status of DOM node.
* `saveLastFocusNode(): void`
* `clearLastFocusNode(): void`
* `backLastFocusNode(): void`
* `getFocusNodeList(node: HTMLElement): HTMLElement[]` get a list of focusable nodes from the subtree of node.
* `limitTabRange(node: HTMLElement, e: Event): void`
```jsx
import focus from 'rc-util/lib/Dom/focus';
```
#### Dom/support
> { animation: boolean | Object, transition: boolean | Object }
A flag to tell whether current environment supports `animationend` or `transitionend`.
```jsx
import support from 'rc-util/lib/Dom/support';
```
### KeyCode
> Enum
Enum of KeyCode, please check the [definition](https://github.com/react-component/util/blob/master/src/KeyCode.js) of it.
```jsx
import KeyCode from 'rc-util/lib/KeyCode';
```
#### KeyCode.isTextModifyingKeyEvent
> (e: Event): boolean
Whether text and modified key is entered at the same time.
#### KeyCode.isCharacterKey
> (keyCode: KeyCode): boolean
Whether character is entered.
### switchScrollingEffect
> (close: boolean) => void
improve shake when page scroll bar hidden.
`switchScrollingEffect` change body style, and add a class `ant-scrolling-effect` when called, so if you page look abnormal, please check this;
```js
import switchScrollingEffect from "./src/switchScrollingEffect";
switchScrollingEffect();
```
## License
[MIT](/LICENSE)
![[ICO]](/icons/blank.gif){kind=icon}
![[PARENTDIR]](/icons/back.gif){kind=icon}
![[DIR]](/icons/folder.gif){kind=icon}
![[TXT]](/icons/text.gif){kind=icon}
![[ ]](/icons/unknown.gif){kind=icon}