LCA Chakra UI .pdf



Nom original: LCA_Chakra UI.pdf

Ce document au format PDF 1.4 a été généré par Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36 OPR/73.0.3856.408 / Skia/PDF m87, et a été envoyé sur fichier-pdf.fr le 02/05/2021 à 18:58, depuis l'adresse IP 88.125.x.x. La présente page de téléchargement du fichier a été vue 8 fois.
Taille du document: 1.2 Mo (5 pages).
Confidentialité: fichier public


Aperçu du document


07/03/2021

Chakra UI is the Only React Component Library You Need | by Caelin Sutch | Jan, 2021 | JavaScript in Plain English

To make Medium work, we log user data. By using Medium, you agree to our Privacy Policy, including
cookie policy.

You have 2 free member-only stories left this month. Sign up for Medium and get an extra one

Chakra UI is the Only React Component
Library You Need
Caelin Sutch
Jan 30 · 4 min read

One of the hardest parts of developing a product is the dizzying amount of components
that are often required for any full stack application. Building a dropdown menu or a
button from scratch is time consuming, taking away from potential time spent on
actual features.
Tools like Tailwind CSS have popped up to address this problem, accelerating the
design -> code component of programming. However, Tailwind can be limiting, it’s not
built for React or styled components (instead using CSS classes) and doesn’t provide
any pre-built components, just tags to make building components faster.
I’ve recently fallen in love with a component library called Chakra UI. Chakra is a
simple, modular, and accessible component library that provides all the building blocks
to build a great React application.

https://javascript.plainenglish.io/chakra-the-react-component-library-you-need-7e383a105a90

1/5

07/03/2021

Chakra UI is the Only React Component Library You Need | by Caelin Sutch | Jan, 2021 | JavaScript in Plain English

To make Medium work, we log user data. By using Medium, you agree to our Privacy Policy, including
cookie policy.
Chakra

There’s a couple key reasons to use Chakra:
Chakra was built in Typescript
Chakra supports SSR (Server Side Rendering)
Chakra is incredibly modular and customizable
Light/Dark Mode and custom themes upported out of the box!
The documentation is clear and comprehensive
The Chakra community is big and getting bigger
As a developer, I’ve seen many projects where accessibility is often an offhand thought
that almost never gets dealt with. However, with Chakra, it’s incredibly simple to make
your site accessible to create a truly accessible online experience.

What’s the advantage of Chakra components?
Chakra offers a huge amount of high-quality React components that are incredibly
customizable. This makes Chakra truly a joy to work with from a developer
perspective.
Chakra was designed with a couple core principles in mind:
1. Style Props — All component styles can easily be overriden and extended to reduce
the use of

css

or

styled

2. Simplicity — Each component has a simple API and the documentation shows key
real-world scenarios of using the component.
3. Composition — Each component is broken down into small parts that can be put
together. For example, The

Tab

component is really made up of 3 components that

are composed together.
4. Accessibility — Focus management, keyboard navigation, color contrast, and

aria

attributes are easily accessible/customizable
https://javascript.plainenglish.io/chakra-the-react-component-library-you-need-7e383a105a90

2/5

07/03/2021

Chakra UI is the Only React Component Library You Need | by Caelin Sutch | Jan, 2021 | JavaScript in Plain English

Themes
—work,
Themes
easy
toMedium,
integrate
To5.
make
Medium
we logare
userreally
data. By
using
you with
agree each
to our component
Privacy Policy, including
cookie policy.
6. Consistent Prop Naming — Auxilery verbs are used for all props, such as does
has

,

is

, or

,

should

Style Props
Style props are one of my favorite parts of Chakra. With style props, you can easily
customize the style of a component by props, which is an incredibly clean solution for
styling components.

Theming
Chakra is built on the Styled System theme spec and it’s easy to extend or customize
the built in theme.
Themes also extend to component styles. You can declare component styles that alter
size or visual properties using an object. Read more about component styles here.

Simple/Modular
The simplicty and modularity of Chakra is my favorite feature. For example, lets take a
look at the

Box

component, which wraps around a

div

element. It’s the most abstract

element in the Chakra toolset, and can be used to compose basically anything.
For example:

<Box as="span" ml="2" color="gray.600" fontSize="sm">
Span
</Box>

This renders out a

span

element with a left margin, small font size, and gray color.

Note that the the props used here are taking advantage of Chakra theming to substitute
real values for

gray.600

,

sm

, and

2

.

https://javascript.plainenglish.io/chakra-the-react-component-library-you-need-7e383a105a90

3/5

07/03/2021

Chakra UI is the Only React Component Library You Need | by Caelin Sutch | Jan, 2021 | JavaScript in Plain English

To make Medium work, we log user data. By using Medium, you agree to our Privacy Policy, including
cookie policy.

Here’s an example component from the Chakra Box documentation built using

Box

and some of its props. You can see how powerful Chakra is when creating fully fledged
components.
This style properties can be used with any component in the Chakra toolset, not just
Box

, so you can customize each component as much as you want with the same simple

API.

Conclusion
As a software developer, I’ve loved using Chakra to quickly create layouts that don’t just
look good, but have great and clean code behind the scenes. Check out the Chakra
website to learn more about this great component library.

Keep in Touch
There’s a lot of content out there and I appreciate you reading mine. I’m an
undergraduate student at UC Berkeley in the MET program and a young entrepreneur.
I write about software development, startups, and failure (something I’m quite adept
at). You can signup for my newsletter here or check out what I’m working on at my
website.

https://javascript.plainenglish.io/chakra-the-react-component-library-you-need-7e383a105a90

4/5

07/03/2021

Chakra UI is the Only React Component Library You Need | by Caelin Sutch | Jan, 2021 | JavaScript in Plain English

Feel
free
to reach
and
connect
on Linkedin
Twitter,
love hearing
To
make
Medium
work,out
we log
user
data. Bywith
usingme
Medium,
you agree or
to our
PrivacyIPolicy,
including from
cookie
policy.
people
who read my articles :)

React

Web Development

Software Development

Programming

Design

About Help Legal
Get the Medium app

https://javascript.plainenglish.io/chakra-the-react-component-library-you-need-7e383a105a90

5/5


Aperçu du document LCA_Chakra UI.pdf - page 1/5

Aperçu du document LCA_Chakra UI.pdf - page 2/5

Aperçu du document LCA_Chakra UI.pdf - page 3/5

Aperçu du document LCA_Chakra UI.pdf - page 4/5

Aperçu du document LCA_Chakra UI.pdf - page 5/5




Télécharger le fichier (PDF)


LCA_Chakra UI.pdf (PDF, 1.2 Mo)

Télécharger
Formats alternatifs: ZIP Texte



Documents similaires


lcachakra ui
accordionpanelv3
physreva 84 023818
hd0000en03 hdt series brochure a4 2018 1
cvvuylstekerleoen
proffie board manual

Sur le même sujet..




🚀  Page générée en 0.009s