Why you should start using ChakraUI (Part 1).

Hi Devs, hope you're all doing great!

We are going to be discussing ChakraUI.

I want to clear some misconceptions about ChakraUI. I'm not working for ChakraUI. I'm also not an ambassador for Chakra, these are just the experience and some research I have made on the library.

No doubt, there are a lot of component libraries based on React in 2022. Therefore, picking the best might be hard to find but picking one that will save you stress shows how creative you are as a Frontend developer.

I'm not here to praise any React component library, but here to talk about my experience using ChakraUI.

I know you are familiar with some of the best component libraries based on React out there. E.g

• Mantine (Very close to chakra-UI).
• MUI (Formally Material-UI).
• Tailwind (ChakraUI Inspiration).
• DaisyUI
• And lot more...

What is ChakraUI

ChakraUI, as it states is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

The words 'simple, modular and accessible', ringed a bell to me when I was looking around for a component library more like tailwind in the react world. I personally love tailwind, but I thought to myself that I don't want to write a logic in my code just to open a modal or do some simple component logic stuffs. I just want to have a nice-looking library that does that for me.

Features of ChakraUI

As stated on ChakraUI's documentation:

If your preferred component library cannot offer you the first 5 on the list, I bet it is not a complete component library. In this way, ChakraUI shines. especially the fact that i can compose components differently as if it was designed by two different entities.

ChakraUI vs Tailwind

Without doubt, ChakraUI picked it inspiration from TailwindCSS. I'm really excited it did.

Last year, I worked on a project on React where we used Tailwindcss. Building with it was fun, but we have one goal in mine, which was: we do not want to waste time on the UI of our app. Using Tailwind was like stressful for us, because we had to build the components, pass props, manage their states and the likes.We found ourselves writing another component library. We found ourselves doing this:

import { forwardRef, Ref, ElementType } from "react";
import { classNames } from "../../utils/functions";
import { ButtonBase, ButtonBaseProps } from "../base/buttonBase";
import { ImSpinner8 } from "react-icons/im";
import { SrOnly } from "../base/srOnly";
import { ButtonProps } from "../../utils/interfaces";

function Button<P extends ElementType = "button">(
  {
    className,
    children,
    loadingText = "Loading...",
    groupHoverAnimation,
    animateOnHover = false,
    id,
    onClick,
    size = "md",
    isDisabled = false,
    isFullWidth = false,
    isLoading = false,
    leftIcon,
    rightIcon,
    iconSpacing = "md",
    ariaLabel,
    ...props
  }: ButtonProps & ButtonBaseProps<P>,
  ref: Ref<HTMLButtonElement>
) {
  const sizeType =
    size === "xs"
      ? "btn-xs"
      : size === "sm"
      ? "btn-sm"
      : size === "md"
      ? "btn-md"
      : size === "lg"
      ? "btn-lg"
      : null;

  const iconSize =
    size === "xs"
      ? "text-[12px]"
      : size === "sm"
      ? "text-[14px]"
      : size === "md"
      ? "text-[16px]"
      : size === "lg"
      ? "text-[18px]"
      : null;

  const groupHoverAnimationType =
    groupHoverAnimation === "grow"
      ? "group-hover:animate-grow"
      : groupHoverAnimation === "roll"
      ? "group-hover:animate-roll"
      : groupHoverAnimation === "wiggle"
      ? "group-hover:animate-wiggle"
      : null;

  const iconSpacingType =
    iconSpacing === "sm" && leftIcon
      ? "mr-1"
      : iconSpacing === "md" && leftIcon
      ? "mr-1.5"
      : iconSpacing === "lg" && leftIcon
      ? "mr-2"
      : iconSpacing === "xl" && leftIcon
      ? "mr-3"
      : iconSpacing === "sm" && rightIcon
      ? "ml-1"
      : iconSpacing === "md" && rightIcon
      ? "ml-1.5"
      : iconSpacing === "lg" && rightIcon
      ? "ml-2"
      : iconSpacing === "xl" && rightIcon
      ? "mr-3"
      : null;

  const animateOnHoverType = animateOnHover ? "btn-animate" : null;

  const isFullWidthType = isFullWidth ? "w-full" : "w-[max-content]";

  return (
    <ButtonBase
      {...(props as ButtonBaseProps)}
      id={id}
      onClick={onClick}
      ref={ref}
      aria-busy={isLoading ?? false}
      disabled={isDisabled || isLoading}
      className={classNames(
        `${className} ${isFullWidthType} ${sizeType} ${animateOnHoverType} group active:transform active:scale-[0.98]`
      )}
    >
      {leftIcon && (
        <span
          aria-hidden="true"
          className={classNames(
            `${iconSpacingType} ${iconSize} ${groupHoverAnimationType}`
          )}
        >
          {leftIcon}
        </span>
      )}
      {isLoading && (
        <span
          aria-hidden="true"
          className={classNames(`${iconSize} animate-spin mr-1.5`)}
        >
          <ImSpinner8 />
        </span>
      )}
      {isLoading && loadingText ? loadingText : children}
      {rightIcon && (
        <span
          aria-hidden="true"
          className={classNames(
            `${iconSpacingType} ${iconSize} ${groupHoverAnimationType}`
          )}
        >
          {rightIcon}
        </span>
      )}
      {ariaLabel && <SrOnly>{ariaLabel}</SrOnly>}
    </ButtonBase>
  );
}

export default forwardRef(Button) as typeof Button;

Obviously, there's nothing bad here, except you find a bug devs!😉😉😉. We want to achieve some features here,

Accessibility, Theming, Composable, Light and Dark features and so on.

Nice work from my colleagues MoyoHussien. This is not even the baseButton component, this is the main button component, we have a baseButton component also. We found ourselves writing a lot and there's no time on our side.

The funny thing is that we knew about ChakraUI, but we were thinking it is not flexible like TailwindCSS. Yes! I agree it is not, but it is very close.

You might disagree with me dev, but please if your goal is to build fast, go with ChakraUI and thank me later.

ChakraUI Ships more Javascript

I have seen series of posts and video, saying chakra-ui ships more javascript, due to the fact that it uses javascript not css. Lol!.

What do you except from a React component library?

Let's break it down,

Javascript -> Typescript -> React -> ChakraUI

Why won't it ship Javascript and on top of that, it's also really small (375kB minified, 101kB minified, and gzipped, although you should remember that besides the core Chakra library you have to install Emotion).

Note: I'm not been payed by ChakraUI or anyone, this is just my own opinion.

In the next series, we will continue from here.

One love from Nigeria.!

This is my First post on DevTo.

Getting Started with ChakraUI

....

Comments

[Hussein AbdulQohar]

Congratulations on your first article👍