DEV Community: I-am-abdulazeez

Introducing Stunk — A Minimalist, Reactive State Management Library.

I-am-abdulazeez — Fri, 07 Mar 2025 08:14:33 +0000

If you’ve ever wrestled with state management in JavaScript or TypeScript, you know the struggle: bloated libraries, unnecessary re-renders, and a tangled web of dependencies. What if there was a simpler, more lightweight solution? Enter Stunk — a minimalist, framework-agnostic state management library designed to be reactive, performant, and easy to use. Written in TypeScript with full type inference. Stunk ensures a seamless developer experience without sacrificing power.

Why Stunk?
State management is the backbone of modern frontend development, but most solutions come with trade-offs:

Redux requires boilerplate.
Context API causes excessive re-renders.
Recoil and Jotai introduce their own learning curves.
Zustand is simple but lacks fine-grained reactivity.

Stunk takes a different approach, balancing simplicity with power:

Minimalistic API: No unnecessary complexity, just get, set, subscribe, and a few powerful utilities.
Reactivity First: Fine-grained reactivity ensures that components re-render only when necessary.
Framework-Agnostic: Works seamlessly with React, Vue, and even vanilla JavaScript.
Asynchronous State: asyncChunk handles async data elegantly with loading, error, and data states built-in.
Selectors & Computed State: Update only specific parts of the state while keeping reactivity intact.
Middlewares & Extensions: Features like withHistory and withPersistence add flexibility without bloating the core.

Talk is cheap. Here's the code.

Getting Started with Stunk

Setting up Stunk is straightforward. Install it via npm or your favorite package manager:

npm i stunk

Then, define and use a Chunk (a reactive state unit):

import { chunk } from 'stunk';

const counter = chunk(0);

console.log(counter.get()); // 0
counter.set(10);
console.log(counter.get()); // 10
counter.set(prev => prev + 1); // Logs: New Value: 11

// Reactively subscribe to changes
counter.subscribe(value => {
  console.log("New Value:", value);
});

// Reset to initial value
counterChunk.reset(); // 0

Stunk in React

Stunk integrates seamlessly with React using stunk/react:

import { chunk } from 'stunk';
import { useChunk } from 'stunk/react';

const count = chunk(0);

function Counter() {
 const [value, set] = useChunk(count);
 return (
   <div>
     <p>Count: {value}</p>
     <button onClick={() => set(prev => prev + 1)}>Increment</button>
   </div>
 );
}

Asynchronous State with asyncChunk

Handling async data? asyncChunk makes it a breeze:

import { asyncChunk } from 'stunk';

const userChunk = asyncChunk(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return res.json(); 
});

userChunk.subscribe(({ loading, data, error }) => {
  if (loading) console.log("Loading...");
  else if (error) console.error(error);
  else console.log("User:", data);
});

Stunk's Vision

Stunk is built to be lightweight yet powerful, giving developers fine-grained control over reactivity without unnecessary complexity. Whether you're building small projects or large-scale applications, Stunk adapts to your needs.

Try Stunk Today

Stunk is open-source and ready for your next project. Check out the GitHub repo and start building:

🔗 GitHub: Github Repo
🚀 Docs: Stunk

Let's redefine state management together. Happy coding! ✨

Why you should start using ChakraUI (Part 1).

I-am-abdulazeez — Thu, 01 Dec 2022 06:18:38 +0000

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

....