Building Responsive Components with Chakra UI

What is Chakra UI?

Chakra UI is a customizable, accessible, reusable, and easy-to-use component library that provides a great developer experience. It comes packed with useful hooks, such as the useColorMode hook, which enables us to add dark mode to our applications. With Chakra UI, we can build the front end of our web applications efficiently and effectively.

Building Responsive Components

When it comes to writing responsive CSS, developers have the option of choosing between mobile-first and desktop-first approaches. Chakra UI takes the mobile-first approach using the @media(min-width) media query. Responsive styling in Chakra UI relies on breakpoints defined in the theme object. We can switch from the default breakpoints to custom breakpoints that fit our application’s specifications using the createBreakpoints theme tool.

Understanding Chakra UI’s Responsive Syntax

Chakra UI provides two syntaxes for creating responsive styles: the array syntax and the object syntax. These syntaxes abstract the complexities of writing media queries and provide a great developer experience when developing responsive components.

// Array syntax
[
  { base: '300px' },
  { md: '400px' },
  { lg: '500px' }
]

// Object syntax
{
  base: '300px',
  md: '400px',
  lg: '500px'
}

Using the useMediaQuery Hook

The useMediaQuery hook is a custom hook used to detect whether a single media query or multiple media queries individually match. It returns a boolean based on the media query we define. We can use this hook to conditionally render components based on the screen size.

import { useMediaQuery } from '@chakra-ui/react';

function MyComponent() {
  const [isMobile] = useMediaQuery('(max-width: 30em)');

  if (isMobile) {
    return ;
  } else {
    return ;
  }
}

Building a Responsive Dashboard Application

Let’s build a responsive dashboard application using Chakra UI. The dashboard layout consists of the Sidebar and Header components. We’ll use Chakra UI’s useDisclosure hook to set up the functionality of the hamburger menu and sidebar.

Creating the Header Component

The Header component consists of a logo, a UserProfile component, and a hamburger menu. We’ll use Chakra UI’s Flex component to set the display to “flex” and adjust the left margin based on the breakpoints.

import { Flex, Box } from '@chakra-ui/react';

function Header() {
  return (
    
      
        Logo
      
      
        
      
      
        
      
    
  );
}

Creating the Sidebar Component

The Sidebar component consists of a logo, a list of links, and a “close” button. We’ll use Chakra UI’s Drawer component to set up the mobile sidebar and make it responsive.

import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '@chakra-ui/react';

function Sidebar() {
  return (
    
      Dashboard

• Link 1
• Link 2
• Link 3

      
      
        Close
      
    
  );
}

Using Next.js’ Router Events API

To ensure the sidebar closes when a link is clicked, we’ll use Next.js’ router events API. We’ll register the routeChangeComplete event and call the onClose function when the event fires.

import { useRouter } from 'next/router';

function Sidebar() {
  const router = useRouter();

  router.events.on('routeChangeComplete', onClose);

  return (
    //...
  );
}

Creating the Homepage View

The homepage view consists of two components, ProductCard and ProductModal. We’ll loop through a product data array and create a ProductCard grid. When a product card is clicked, we’ll display a modal filled with data about the product.

import { Grid, GridItem } from '@chakra-ui/react';

function Homepage() {
  const products = [
    { id: 1, name: 'Product 1', price: 10.99 },
    { id: 2, name: 'Product 2', price: 9.99 },
    //...
  ];

  return (
    
      {products.map((product) => (
        
          
        
      ))}
    
  );
}

Creating the ProductCard Component

The ProductCard component consists of an upper and a lower section. We’ll pass in the product object and the setModalData method to ProductCard. When the product is clicked, we’ll update the modalData state with the product’s data.

import { Box, Image, Text } from '@chakra-ui/react';

function ProductCard({ product, setModalData }) {
  return (
     setModalData(product)}>
      
      {product.name}
      ${product.price}
    
  );
}

Creating the ProductModal Component

The ProductModal component consists of the product’s image, title, and price. We’ll pass in the isOpen, onClose, and modalData state to ProductModal. We’ll use Chakra UI’s Modal component and define a handleModalClose function to close the modal when the purchase button is clicked.

import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@chakra-ui/react';

function ProductModal({ isOpen, onClose, modalData }) {
  const handleModalClose = () => {
    onClose();
  };

  return (
    
      
        {modalData.name}
        
          
          ${modalData.price}
        
        
          Purchase
        
      
    
  );
}

By following this guide, you’ve learned how to build responsive components with Chakra UI. You’ve also seen how to use the useMediaQuery and useDisclosure hooks to create a responsive dashboard application. The source code for the dashboard application is available on GitHub.