I found Chakra UI (by Sage) a few months ago, and I learned a lot of things from it.
I've been coding in React since 2017, and I used Less, Sass, styled-components, even StyleSheet in react-native. But this time I found something more fluent.
A little Introduction
Have you ever used styled-components? Chakra UI moved all the CSS strings to props, like the following Box, a div wrapper:
<Box height={4} width="20rem" bg="blue.100" />
And this is awesome. š¤©
Also the default theme is flexible and you can overwrite whatever you want, and also create custom components to extend the built-in Chakra components.
And if you are a TypeScript lover: the types are very consistent.
But this post is not an introduction...
And where is the treasure?
Like every treasure, this one is not in the surface, you'll need to go deeper. I cloned the source code of Chakra UI and I found a lot of stuff.
The project structure
Chakra is built using packages for each module š; some are internals and others are public and exported by the main package @chakra-ui/react. You can learn how to use lerna and how to build this system package by package. š¦
The hooks
The first package I dove into was the @chakra-ui/hooks and I found the first treasure:
The useOutsideClick is a common one to hide popovers when the user clicks outside them. And then there is the useMergeRefs when you need to merge several React refs into one. I contributed with doc pages for both hooks. š
You can find more useful hooks.
Like this special one: the usePopper, a wrapper for the popper.js šæ library, converting it into a magic hook. This is an internal hook and it's not documented in the website, but is still exported and you can use it, the downside is that ā ļø it's not covered by semver. š
The utils
Another internal package is the @chakra-ui/utils.
Here you can find functions for arrays that remembers to the Lodash library. Also to manage functions and parse numbers.
Another one to work with objects with lodash.mergewith as a dependency.
You can use addDomEvent to add global event listeners without leaks.
import {addDomEvent} from '@chakra-ui/utils';
const MyNiceFeature = () => {
const [height, setHeight] = useState(window.innerHeight - 50);
useEffect(
() =>
addDomEvent(window, 'resize', () =>
setHeight(window.innerHeight - 50),
),
[],
);
...
};
If these helpers are already loaded in your bundle, why would you repeat the code instead of reusing it?
The React code
I found myself reading the code by Sage and the contributors and learning another way to handle heavy UI components, like the @chakra-ui/menu. Using hooks and event handlers to handle the user interactions in a fluent way. š¤Æ
Conclusion
I found a nice and beautiful UI library where I can handle CSS inside the React components without string templates. But I also found a source to learn new stuff:
- How to handle UI behavior with reusable hooks and functions.
- A hidden toolbox that I can use for my own components too.
- The path to use Lerna in a monorepo.
- A guideline to pass from
pxtoremunits in CSS.
Cons
- Some tweaks that you'll need to customize the theme is not explicitly documented.
- The community is growing but not so big like `styled-components.
- The documentation is a work in progress, there are some advanced functionalities that you'll have to understand by reading the source code.
I hope you fall in love with Chakra UI too and the power of the Open Source Software. š„° #ShareTheKnowledge
Top comments (11)
Yeah I agree on that, I'm more of a Sass guy. Then I get Tailwindcss as recommendation. But I really don't know why it's more like a mess to maintain. But achieved good Compression file size in production.
So, I started learning chakra-ui from last month. As you mentioned. The problem is documentation. TailwindCSS has an awesome documentation. But, here I'm really missing that.
Although the discord community is more active then you expect!
Let's hope they'll provide an awesome tools and docs in the future run.
One of the main reasons I chose chakra-ui time and time again is how well they handle accessibility for you out of the box. I think it's an often overlooked benefit, but I know it's one of chakra's primary focuses internally - so much so that it's even featured front and center on their landing page.
The con: it's CSS in JS.
If you'd like to get up and running in no time, then Chakra is a way to go.
Last week I stumbled upon Chakra Templates, open source collection of ready to use components. That speeds up the process even more.
Itās really nice UI frame work, most powerful but Itās not recommended for enterprise and large scale projects because of css in js performance issues. As the project grows the app becomes slow.
More and more I have experienced it. This is also written in documents.
So if you have plan to work on the project for long term better choose a different tool.
I use Chakra every day but currently I try to learn Tailwind.
How do you think both of them compare ?
Chakra is just css as props, so same vanilla syntax you use in css files works also in the props, tailwind from what I can tell is faster in production less boilerplate, with chakra you have lots of boilerplate from imports with tailwind you have them with the classes but compared to chakra less boilerplate because in chakra you have the Imports and then also the props for styling so a tailwind component looks cleaner even with lots of classes. How they compare, well both are nice but tailwind is clearly more polished and for production apps a nice library and I say this even I have a few production apps with chakra running.
Great post!
Great Post. Material UI is also having similar and awesome stuffs.
For me the worst, every app you build looks like a google product.