¿Cómo generar colores aleatorios usando ganchos React?

Vamos a hacer un gancho personalizado de reacción para generar colores aleatorios.

Requisito previo:

• Reaccionar.js
• Ganchos de reacción

Enfoque: Básicamente, si estamos familiarizados con React, entonces todos ya hemos usado ganchos personalizados de reacción (como useState , useEffect , useContext, etc.). También podemos hacer nuestros ganchos de reacción personalizados y usarlos donde queramos. Así que hay un pequeño código para generar colores aleatorios. Aquí crearemos un gancho personalizado generador de color aleatorio (en nuestro archivo de gancho personalizado), aquí crearemos una función para cambiar el color llamada (generateColor), y pasaremos color y generaremos color como retorno. Luego usaremos esto en nuestro App.js desestructurando y usaremos ese color generado como una función de evento onClick para un botón a través del cual cambiaremos el color de nuestra ventana.

Creando una aplicación de reacción:

Paso 1: Vaya a su símbolo del sistema y escriba el siguiente comando para crear una aplicación de reacción.

npx create-react-app <YOUR_APP_NAME>

Paso 2: luego ve a la carpeta de tu aplicación escribiendo el siguiente comando

cd <YOUR_APP_NAME>

Estructura del proyecto: nuestra estructura de carpetas debería ser así.

Estructura de carpetas

Paso 3: Cree un archivo separado useGenerateRandomColor.js en su carpeta src y use el siguiente código:

import {useState} from 'react';
  
const useGenerateRandomColor = () => {
    const [color,setColor] = useState("")
    const generateColor = () =>{
        setColor(Math.random().toString(16).substr(-6));
    };
    return {color,generateColor};
      
};
export default useGenerateRandomColor;

Paso 4: Ahora vaya a src/ App.js y pegue el código a continuación para usar nuestro gancho personalizado generador de colores aleatorios.

import "./App.css";
import useGenerateRandomColor 
    from "./useGenerateRandomColor";
  
function App() {
  const { color, generateColor } 
            = useGenerateRandomColor();
  return (
    <div
      style={{
        height: "100vh",
        width: "100vw",
        backgroundColor: "#" + color,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <button
        style={{
          padding: "40px",
          borderRadius: "10px",
          backgroundImage: 
"linear-gradient(to top, #a8edea 0%, #fed6e3 100%)",
          fontSize: "larger",
        }}
        onClick={generateColor}
      >
        Generate random color
      </button>
    </div>
  );
}
  
export default App;

Ahora estamos listos para usar nuestra aplicación de reacción.

Paso para ejecutar la aplicación: Ejecute el siguiente comando para iniciar su aplicación en su servidor local: 3000.

npm start

Producción: