Componente DOMHelper de React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente DOMHelper manipula directamente el DOM para algunas consideraciones. Podemos usar el siguiente enfoque en ReactJS para usar el componente DOMHelper de React Suite.

DOMMouseMoveTracker: se utiliza para el rastreador de arrastre del mouse. Este método toma los siguientes parámetros:

• onMove: Es una función que se dispara cuando el movimiento está activo.
• onMoveEnd: Es una función que se dispara cuando se detiene el movimiento.
• Node: se utiliza para denotar el elemento HTML.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

 

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install @rsuite/charts

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: En el siguiente ejemplo, hemos utilizado el método addTheStyling para agregar el estilo a nuestro elemento con solo hacer clic en el botón.

Nombre de archivo: App.js

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Button, DOMHelper } from 'rsuite';
const { addStyle } = DOMHelper;
  
export default class App extends React.Component {
  
  // State holding initial style
  constructor(props) {
    super(props);
    this.state = {
      htmlCode: '<div class="view"></div>'
    };
  }
  
  // Function to set the states with latest style
  showView() {
    const htmlCode = this.container.innerHTML;
    this.setState({ htmlCode });
  }
  
  // Function to add the styles
  addTheStyling() {
    addStyle(this.view, { 'margin-top': '16px', 'color': 'orange' });
    this.showView();
  }
  
  render() {
    const { htmlCode } = this.state;
    return (
      <div>
        <h4>React Suite DOMHelper Component</h4>
        <Button appearance="primary" onClick={() => this.addTheStyling()}
        > Click to Add Style
        </Button>
  
        <div>{htmlCode}</div>
        <div ref={ref => { this.container = ref }}>
          <div className="view" ref={ref => { this.view = ref }} />
        </div>
      </div>
    );
  }
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 2: en el siguiente ejemplo, hemos utilizado el método hasClass para verificar si el elemento tiene una clase con nombre personalizado o no, esta función se activa cuando el usuario hace clic en el botón.

Nombre de archivo: App.js

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Button, DOMHelper } from 'rsuite';
const { hasClass } = DOMHelper;
  
export default class App extends React.Component {
  
    // State holding initial style
    constructor(props) {
        super(props);
        this.state = {
            htmlCode: `<div class="view" style="font-size: 16px; 
            color: orange;"></div>`
        };
    }
  
    render() {
        const { htmlCode } = this.state;
        return (
            <div>
                <h4>React Suite DOMHelper Component</h4>
                <Button appearance="primary" onClick={() =>
                    alert(hasClass(this.view, 'custom'))}
                > Click me to check hasClass method
                </Button>
  
                <div>{htmlCode}</div>
                <div ref={ref => { this.container = ref }}>
                    <div className="view" ref={ref => { this.view = ref }} />
                </div>
            </div >
        );
    }
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://rsuitejs.com/components/dom-helper/