How to Implement Chakra UI in ReactJS ?

Chakra UI is a powerful component library for React that is designed and developed by Segun Adebayo to build front-end applications. The Chakra UI comes with simple yet easy-to-understand documentation that gives us guidelines on how to build a reusable component, thereby reducing the time spent on building the process while focusing on other aspects of the app. 

Key features of Chakra-UI are:

• Minimalistic
• Styled-system
• Reusability
• Responsiveness

Prerequisites:

• NPM & Node.js
• React JS
• Html, CSS and JavaScript
• React JS Chakra UI

Approach:

To Implement Chakra UI in ReactJS we will implement the Dark Mode switch, Chakra UI provides a React hook called useColorMode that gives us access to the color mode as well as the toggle color mode. This hook stores the color mode in localStorage and uses that value when the page is loaded. To make sure that our color mode is enabled we need to add ColorModeScript to the index.js file. The value of ColorModeScript is set to light.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command.

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 react-icons

Project Structure:

Project Structure

The updated dependencies in package.json file

"dependencies": {
        "@chakra-ui/react": "^2.8.2",
        "@emotion/react": "^11.11.1",
        "@emotion/styled": "^11.11.0",
        "@material-ui/core": "^4.12.4",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "framer-motion": "^4.1.17",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-icons": "^4.12.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
},

Example: This example uses colorModeScript from the Chakra UI and useColorMode hook to implement the Dark theme in the application

Javascript

// Filename - index.js

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")
);

Javascript

// Filename - App.js

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;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: