DOMHelper

In React , we do not recommend direct manipulation of the DOM, but inside the RSUITE component, you have to directly manipulate the DOM for some considerations. If you have similar requirements, you can use this method directly.

Import

import { DOMHelper } from 'rsuite';

APIs

class

hasClass: (node: HTMLElement, className: string) => boolean;
addClass: (node: HTMLElement, className: string) => HTMLElement;
removeClass: (node: HTMLElement, className: string) => HTMLElement;
toggleClass: (node: HTMLElement, className: string) => HTMLElement;

style

addStyle: (node: HTMLElement, property: string, value: string) => void;
addStyle: (node: HTMLElement, style: Object) => void;

removeStyle: (node: HTMLElement, property: string) => void;
removeStyle: (node: HTMLElement, propertys: Array<string>) => void;

getStyle: (node: HTMLElement, property: string) => string;
getStyle: (node: HTMLElement) => Object;

events

on: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => {off: Function};
off: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => void;

scroll

scrollLeft: (node: HTMLElement) => number;
scrollLeft: (node: HTMLElement, value: number) => void;

scrollTop: (node: HTMLElement) => number;
scrollTop: (node: HTMLElement, value: number) => void;

query

getHeight: (node: HTMLElement, client: HTMLElement) => number;
getWidth: (node: HTMLElement, client: HTMLElement) => number;
getOffset: (node: HTMLElement) => Object;
getOffsetParent: (node: HTMLElement) => HTMLElement;
getPosition: (node: HTMLElement, offsetParent: HTMLElement) => Object;
contains: (context: HTMLElement, node: HTMLElement) => boolean;

DOMMouseMoveTracker

Mouse drag tracker

new DOMMouseMoveTracker(
  onMove:(deltaX: number, deltaY: number, moveEvent: Object) => void,
  onMoveEnd:() => void,
  container: HTMLElement
);
Vercel banner