¿Cómo cambiar el color del rectángulo al cambiar el tamaño usando React.js?

En este artículo, veamos cómo podemos cambiar el color de un rectángulo al cambiar el tamaño usando ReactJS.

Enfoque: para cambiar el color al cambiar el tamaño, debemos implementar dos características. Primero, deberíamos poder cambiar el tamaño del rectángulo. En segundo lugar, necesitamos detectar el tamaño del rectángulo para actualizar el color. Por lo tanto, para cambiar el tamaño, usaremos un componente redimensionable para React y analizaremos el tamaño usando la biblioteca react-resize-detector para React.

A continuación se muestra la implementación paso a paso del enfoque anterior:

Módulos Requeridos:

• npm
• crear-reaccionar-aplicacion

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 demo

Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando:

cd demo

Paso 3: instale react-resize-detector y vuelva a cambiar el tamaño desde npm.

npm i react-resize-detector re-resizable

Abra la carpeta src y elimine los siguientes archivos:

• logotipo.svg
• setupTests.js
• Aplicación.prueba.js 
• índice.css
• informeWebVitals.js
• aplicación.css

Estructura del proyecto: El proyecto debería verse así:

 

Ejemplo: En este ejemplo, veremos cómo cambiar el color del rectángulo al cambiar el tamaño en ReactJS

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
  
const root = ReactDOM.createRoot(
    document.getElementById('root')
);
  
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

import React, { useState, useEffect } from 'react';
import { Resizable } from 're-resizable';
import { withResizeDetector } from 'react-resize-detector';
import React, { useState, useEffect } from 'react';
import { Resizable } from 're-resizable';
import { withResizeDetector } from 'react-resize-detector';
  
const App = ({ width, height }) => {
    const [color, setColor] = useState('red');
    const [state, setState] = useState({
        width: 300, height: 100
    });
  
    useEffect(() => {
        setColor(width > 200 ? width > 300 ?
            '#dacbf7' : '#f1ccf8' : '#d3f8cc');
    }, [width]);
  
    return (
        <>
            <Resizable
                style={{
                    backgroundColor: color,
                    margin: '20px',
                    border: "1px solid black",
                    color: 'green',
                    fontSize: '20px',
                    textAlign: 'center',
                    fontWeight: 'bold'
                }}
                size={{
                    width: state.width,
                    height: state.height
                }}
                onResizeStop={(d) => {
                    setState({
                        width: state.width + d.width,
                        height: state.height + d.height,
                    });
                }}>
                {`${width}x${height}`}
            </Resizable>
            <p style={{
                color: 'blue', margin: '20px',
                fontSize: '20px'
            }}>Current Color: {color}</p>
  
        </>
    );
};
  
export default withResizeDetector(App);

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: