¿Cómo implementar la interfaz de usuario de Chakra en ReactJS?

Chakra UI es una poderosa biblioteca de componentes para React que está diseñada y desarrollada por Segun Adebayo para crear aplicaciones front-end. La interfaz de usuario de Chakra viene con documentación simple pero fácil de entender que nos brinda pautas sobre cómo construir un componente reutilizable, reduciendo así el tiempo dedicado a construir el proceso mientras nos enfocamos en otros aspectos de la aplicación. 

El repositorio Chakra-UI GitHub tiene 18,600 estrellas y se ha bifurcado 1,500 veces. En este artículo, aprenderemos cómo implementar el modo oscuro de Chakra-UI al hacer clic en el botón en React.js.  

Las características clave de Chakra-UI son:

• minimalista
• sistema de estilo
• reutilización
• Sensibilidad

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. En este ejemplo, instalaremos iconos de reacción, así como una biblioteca de terceros.

  npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
  npm i iconos de reacción

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Implementando la funcionalidad del interruptor de modo oscuro:

En el archivo App.js , cree un diseño básico importando los componentes Flex , Spacer , VStack y Heading .

• VStack: es un componente de pila que se utiliza para crear espacio entre los elementos Heading e IconButton en dirección vertical.
• Flex y espaciador: se utiliza para crear un diseño receptivo donde los elementos secundarios ocupan el 100% del ancho manteniendo el mismo espacio entre ellos.
• Título: Se utiliza para representar el título.

Para implementar el cambio de modo oscuro, la interfaz de usuario de Chakra proporciona un enlace de React llamado useColorMode que nos da acceso al modo de color, así como al modo de cambio de color. Este enlace almacena el modo de color en localStorage y usa ese valor cuando se carga la página. Para asegurarnos de que nuestro modo de color esté habilitado, debemos agregar ColorModeScript al archivo index.js . El valor de ColorModeScript se establece en claro.

import { IconButton } from "@chakra-ui/button";
import { useColorMode } from "@chakra-ui/color-mode";
import { Flex, VStack, Heading, Spacer } from "@chakra-ui/layout";
import { FaSun, FaMoon } from "react-icons/fa";
   
function App() {
   
  const { colorMode, toggleColorMode } = useColorMode(); 
  const isDark = colorMode === "dark";
  return (
    <VStack>
      <Flex w="100%">
        <Heading ml="2" size="md" fontWeight='extrabold' 
        color='blue.500' >GGRestro</Heading>
        <Spacer></Spacer>
       <IconButton ml={9} icon={isDark ? <FaSun /> : <FaMoon />} 
       isRound="true" onClick={toggleColorMode}></IconButton>
      </Flex>
    </VStack>
  );
}
   
export default App;

import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
   
 ReactDOM.render(
  <React.StrictMode>
   <ChakraProvider>
     <ColorModeScript initialColorMode="light"></ColorModeScript>
   <App />
   </ChakraProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

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: