Building Responsive Components with Chakra UI
As developers, we strive to create websites and web applications that are not only functional and performant but also responsive on all screen sizes. With the rise of diverse devices, from smartphones to laptops, smartwatches, and AR/VR headsets, ensuring responsiveness is crucial. Chakra UI, a simple, modular, and easily extensible component library, makes building responsive components a breeze.
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. For example, the array syntax translates to:
- 300px from 0em upwards
- 400px from 30em upwards
- 500px from 48em upwards
The object syntax translates to:
- “base” 300px from 0em upwards
- “md” from 48em upwards
- “lg” from 62em upwards
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.
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.
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.
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.
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.
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.
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.
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.