npm.devtool.tech
👏 You can access rc-util package with using rcUtil variable in browser devtools!
Common Utils For React Component

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

rc-util

Common Utils For React Component.

NPM version David dm node version npm download

Install

rc-util

API

createChainedFunction

(...functions): Function

Create a function which will call all the functions with it's arguments from left to right.

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.

import deprecated from 'rc-util/lib/deprecated';

getContainerRenderMixin

(config: Object): Object

To generate a mixin which will render specific component into specific container automatically.

import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin';

Fields in config and their meanings.

FieldTypeDescriptionDefault
autoMountbooleanWhether to render component into container automaticallytrue
autoDestroybooleanWhether to remove container automatically while the component is unmountedtrue
isVisible(instance): booleanA function to get current visibility of the component-
isForceRender(instance): booleanA function to determine whether to render popup even it's not visible-
getComponent(instance, extra): ReactNodeA function to get the component which will be rendered into container-
getContainer(instance): HTMLElementA function to get the container

Portal

Render children to the specific container;

import Portal from 'rc-util/lib/Portal';

Props:

PropTypeDescriptionDefault
childrenReactChildrenContent render to the container-
getContainer(): HTMLElementA function to get the container-

getScrollBarSize

(fresh?: boolean): number

Get the width of scrollbar.

import getScrollBarSize from 'rc-util/lib/getScrollBarSize';

guid

(): string

To generate a global unique id across current application.

import guid from 'rc-util/lib/guid';

pickAttrs

(props: Object): Object

Pick valid HTML attributes and events from props.

import pickAttrs from 'rc-util/lib/pickAttrs';

warn

(msg: string): void

A shallow wrapper of console.warn.

import warn from 'rc-util/lib/warn';

warning

(valid: boolean, msg: string): void

A shallow wrapper of warning, but only warning once for the same message.

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.

import mapSelf from 'rc-util/lib/Children/mapSelf';

Children/toArray

(children: ReactNode[]): ReactNode[]

Convert children into an array.

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.

import addEventlistener from 'rc-util/lib/Dom/addEventlistener';

Dom/canUseDom

(): boolean

Check if DOM is available.

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
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.

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 }
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
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.

import support from 'rc-util/lib/Dom/support';

KeyCode

Enum

Enum of KeyCode, please check the definition of it.

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.

ScrollLocker

ScrollLocker<{lock: (options: {container: HTMLElement}) => void, unLock: () => void}>

improve shake when page scroll bar hidden.

ScrollLocker change body style, and add a class ant-scrolling-effect when called, so if you page look abnormal, please check this;

import ScrollLocker from 'rc-util/lib/Dom/scrollLocker';

const scrollLocker = new ScrollLocker();

// lock
scrollLocker.lock()

// unLock
scrollLocker.unLock()

License

MIT

🔎Explore Package🔎CDN Script

Score

Popularity46/100
Quality98/100
Maintenance99/100