Comment utiliser Chakra UI avec Next.js et React

La création de sites Web et d'applications est difficile. Il y a beaucoup de choses à considérer pour s'assurer que nos applications sont utilisables et accessibles, y compris le fonctionnement de nos composants React.

Comment pouvons-nous tirer parti de la puissance de Chakra UI pour créer d'excellentes applications Web?

  • Qu'est-ce que Chakra UI?
  • Qu'est-ce qui rend Chakra UI si génial?
  • Qu'allons-nous construire?
  • Étape 0: Création d'un nouveau projet React avec Next.js
  • Étape 1: Installation et configuration de l'interface utilisateur de Chakra dans Next.js
  • Étape 2: Ajout de composants d'interface utilisateur Chakra à une application React
  • Étape 3: Créer des composants réactifs avec Chakra UI
  • Étape 4: Personnalisation du thème par défaut de l'interface utilisateur Chakra

Qu'est-ce que Chakra UI?

Chakra UI est une bibliothèque de composants pour React qui facilite la création de l'interface utilisateur d'une application ou d'un site Web.

Leur objectif est de fournir un ensemble de composants simple, modulaire et accessible pour une mise en service rapide.

Qu'est-ce qui rend Chakra UI si génial?

Pour commencer, Chakra s'efforce par défaut de rendre chaque composant accessible. C'est une partie essentielle du développement d'applications qui est souvent négligée, et les responsables de Chakra ont fait tout leur possible pour s'assurer que les composants suivent les directives WAI-ARIA.

Chakra comprend également une API simple permettant aux développeurs d'être productifs. Il permet aux gens et aux équipes de créer des applications inclusives sans avoir à se soucier de créer eux-mêmes un tas de composants.

Pour le style et la personnalisation, Chakra utilise Emotion sous le capot pour fournir aux développeurs la possibilité de styliser leurs composants directement à l'intérieur de leur JavaScript avec des accessoires de style. Il est livré avec un thème par défaut, mais permet de le remplacer facilement avec des paramètres personnalisés.

Qu'allons-nous construire?

Pour avoir une bonne idée du fonctionnement de Chakra, nous allons essentiellement reconstruire le modèle Next.js par défaut avec les composants de l'interface utilisateur de Chakra.

Cela nous aidera à comprendre quelques concepts importants, tels que comment utiliser Chakra UI avec Next.js, comment ajouter des styles personnalisés avec des accessoires et comment personnaliser le thème Chakra UI.

Les concepts ici peuvent s'appliquer à peu près à n'importe quelle application React, bien que les exemples soient légèrement spécifiques à Next.js.

Étape 0: Création d'un nouveau projet React avec Next.js

Pour commencer, nous avons besoin d'une application React. Nous allons utiliser Next.js comme cadre qui nous donnera la possibilité de créer facilement une nouvelle application.

Une fois dans le répertoire dans lequel vous souhaitez créer votre projet, exécutez:

yarn create next-app my-chakra-app # or npx create-next-app my-chakra-app 

Remarque: n'hésitez pas à changer my-chakra-appde nom pour le répertoire du projet.

Et une fois que c'est terminé, vous pouvez naviguer dans ce répertoire et démarrer le projet avec:

yarn dev # or npm run dev 

Cela devrait faire démarrer votre serveur de développement à // localhost: 3000 et nous devrions être prêts à partir!

Suivez le commit!

Étape 1: Installation et configuration de l'interface utilisateur de Chakra dans Next.js

Ensuite, installons Chakra UI.

Dans le répertoire de votre projet, exécutez:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming # or npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming 

Cela installera Chakra UI et ses dépendances, qui incluent Emotion, car il en dépend pour le style.

Pour que Chakra fonctionne dans notre application, nous devons configurer un fournisseur à la racine de notre application. Cela permettra à tous les composants de Chakra de se parler et d'utiliser la configuration pour maintenir des styles cohérents.

À l'intérieur pages/_app.js, importons d'abord notre fournisseur en haut:

import { ThemeProvider, theme } from '@chakra-ui/core'; 

Ensuite, remplacez l'instruction return à l'intérieur du composant par:

function MyApp({ Component, pageProps }) { return (    ) } 

Comme vous le remarquerez, nous transmettons également une themevariable à notre fournisseur. Nous importons le thème par défaut de Chakra UI directement à partir de Chakra et le transmettons à notre ThemeProviderafin que tous nos composants puissent obtenir les styles et les configurations par défaut.

Enfin, nous voulons ajouter un composant appelé CSSResetright en tant qu'enfant direct de notre ThemeProvider.

Tout d'abord, ajoutez CSSResetcomme importation:

import { ThemeProvider, theme, CSSReset } from '@chakra-ui/core'; 

Ajoutez ensuite le composant directement à l'intérieur ThemeProvider:

Et maintenant, si nous rechargeons la page, nous pouvons voir que les choses sont un peu différentes!

Le navigateur est livré avec de nombreux styles par défaut et par défaut, Chakra UI ne les remplace pas. Cela inclut des styles tels que des bordures sur un élément de bouton.

Bien que nous n'ayons pas nécessairement besoin de la réinitialisation CSS ici, nous pourrions remplacer ces choses manuellement. Cela nous fournit une base sur laquelle nous saurons que Chakra UI fonctionne comme prévu et nous pouvons commencer à ajouter nos composants.

Suivez le commit!

Étape 2: Ajout de composants d'interface utilisateur Chakra à une application React

Maintenant pour la partie amusante. Nous allons utiliser les composants de l'interface utilisateur de Chakra pour essayer de reconstruire le modèle par défaut Next.js. Il ne lui ressemblera pas à 100%, mais il portera l'esprit et nous pourrons le personnaliser à notre guise.

Création du titre et de la description

En commençant par le haut, mettons à jour notre titre et notre description.

En haut de la page, nous devons importer notre Headingcomposant:

import { Heading, Link } from "@chakra-ui/core"; 

Alors remplaçons le

Original text


avec:

 Welcome to Next.js!  

Ici, nous utilisons le composant En-tête que nous définissons ensuite «comme» un h1. Nous pouvons utiliser n'importe quel nom de balise d'élément d'en-tête HTML, mais puisque nous remplaçons un h1, nous voulons l'utiliser.

Nous définissons également un sizeattribut, qui nous permet de contrôler la taille de l'en-tête, ainsi que mb, qui signifie margin-bottom, nous permettant d'ajouter de l'espace ci-dessous.

Et nous pouvons déjà voir que notre page ressemble plus au modèle par défaut.

Nous voulons également rajouter notre lien.

Ajoutez Linkà notre instruction d'importation en haut puis à l'intérieur de notre composant, remplacez le texte Next.js par:

Next.js! 

Chakra’s Link component creates a link as expected, but then allows us to use the style props to customize it. Here, we’re using the color variable teal.500 that Chakra provides to change our link to Chakra’s colors.

And we can see that we have our Next.js link!

The last piece of the header is the description. For that, we want to use the Text component.

Add Text  and Code to the import statement and replace the description with:

 Get started by editing pages/index.js

We’re using the Text component to recreate a

tag and the Code component to create our tag. Similar to our Heading component, we’re adding a fontSize to make the font bigger and mt which stands for margin-top to add some space above it.

And now we have our header!

Replacing info cards with Chakra UI components

For each of our cards, we can use the same concepts as we did with the header to recreate each of our boxes.

To start, add an import for the Flex component and replace the tag with:

 ...  

Make sure to leave all of the cards inside of the Flex component. The Flex component will recreate our grid by adding Flexbox along with the same properties that were on the grid before.

At this point, it should exactly the same as it did before.

Next, add Box to the import statement and then replace the first card with:

 Documentation → Find in-depth information about Next.js features and API.  

Similar to our Heading component, we’re setting our Box component “as” an tag allowing it to serve as a link. We then configure our style props to replicate our cards.

Inside of that, we use the Heading and Text component to recreate the actual content of the cards.

And after only changing the first card, we can now see the changes:

Now, we can go back and replace the other three cards with the same components to finish recreating our grid.

For fun, we can add a 5th card that links to Chakra UI:

 Chakra UI → Build accessible React apps & websites with speed.  

And with all of our changes, we can now see our recreated Next.js starting template!

Follow along with the commit!

Step 3: Making responsive components with Chakra UI

Part of what the default Next.js grid was able to provide was the ability for the cards to expand to full width once the size of the browser becomes small enough. This is particularly relevant at 600px, which typically means someone’s on a mobile device.

If we look at our page on a mobile device, we can see that our cards aren’t filling up the entire width.

Chakra allows us to set responsive styles with its baked in sizing, allowing us to easily recreate our responsive grid cards.

To do this, instead of passing in a single value to our style props, we can pass in an array.

For instance, on each of our Box components, let’s update the flexBasis prop to:

flexBasis={['auto', '45%']} 

Here, according to Chakra’s default responsive breakpoints , we’re saying that by default, we want our flexBasis to be set as auto. But for anything 480px and larger, again which is Chakra’s default first breakpoint, we set it to 45%.

Chakra considers its responsive styling to be mobile first, which is why you see the 480px act as a minimum size, not a maximum size.

And with that change, we can now see that on a large device, we still have our grid.

But now on mobile, our cards take up the entire width!

Using the array pattern works for all of the breakpoints, so if you wanted more control over your styles, Chakra lets you do that.

Follow along with the commit!

Step 4: Customizing the default Chakra UI theme

While Chakra provides a pretty great default theme, we also have the ability to customize it to our liking to match our brand or personal taste.

For instance, while the teal that we used for our Heading link is great and uses Chakra’s styles, what if I wanted to customize all links to use the purple that I use on my website?

To start, Chakra comes with a default purple, so we can update our link to use that purple:

Welcome to Next.js! 

And we see our change.

That looks great, but let’s update it to the exact purple I use.

Inside of pages/_app.js, we’re going to create a new object at the top of the page, where we spread the default theme creating a new theme object. We’ll also replace the theme prop with our new object:

const customTheme = { ...theme } function MyApp({ Component, pageProps }) { return (  

If we save and reload the page, it will look exactly the same.

Next, we want to update the colors, so in our custom theme object, let’s add the colors property, where we can then set our custom purple:

const customTheme = { ...theme, colors: { ...theme.colors, purple: '#692ba8' } } 

Note: you’ll see here that we’re also spreading theme.colors. If we don’t, we’ll be replacing the colors object with only the purple value, meaning we won’t have any other colors.

But if we reload the page, our link isn’t purple anymore!

Chakra typically uses ranges of colors which allows us to use different shades of each of the colors. In our Link component, we’re specifying purple.500 which we didn’t set to exist.

So to fix that, we can use a tool like Smart Swatch to get all of our color values that we need and set those in our custom theme object:

const customTheme = { ...theme, colors: { ...theme.colors, purple: { 50: '#f5e9ff', 100: '#dac1f3', 200: '#c098e7', 300: '#a571dc', 400: '#8c48d0', 500: '#722fb7', 600: '#59238f', 700: '#3f1968', 800: '#260f40', 900: '#10031a', } } } 

Tip: Smart Swatch actually lets you copy those values as a JavaScript object, making it easier to paste into our theme!

And now if we reload the page, we can see our purple!

While we used a range value here, we can also specify color variables without a range.

Say I wanted to leave the default Chakra purple “as is” but provide a way for me to reference my purple.

To do that, I could remove those purple values and add a new custom variable:

const customTheme = { ...theme, colors: { ...theme.colors, spacejelly: '#692ba8' } } 

Then update my Link to use that color:

Welcome to Next.js! 

And we can see that we’re now using our purple without overriding the original:

We can apply this to most parts of the styles of Chakra, including Typography and setting custom Breakpoints. It’s another way to make our project custom to our own while still taking advantage of the power of Chakra!

Follow along with the commit!

What else can you do with Chakra UI?

While we went through some simpler examples, it really opens the door to more complex style changes and controls that Chakra provides with its component APIs.

There are also a whole lot of awesome components that you can use to transform your website or application and make development fast and easy!

They even provide recipes that have some examples of how you can combine the components resulting in powerful functionality. This includes a responsive header and even adding animations with Framer Motion.

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ? Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter
  • ? Sponsor Me