Sådan bruges Chakra UI med Next.js og React

Opbygning af websteder og applikationer er svært. Der er mange ting at overveje for at sikre, at vores apps er anvendelige og tilgængelige, herunder hvordan vores React-komponenter fungerer.

Hvordan kan vi udnytte kraften i Chakra UI til at oprette gode webapps?

  • Hvad er Chakra UI?
  • Hvad gør Chakra UI så fantastisk?
  • Hvad skal vi bygge?
  • Trin 0: Oprettelse af et nyt React-projekt med Next.js
  • Trin 1: Installation og konfiguration af Chakra UI i Next.js
  • Trin 2: Tilføjelse af Chakra UI-komponenter til en React-app
  • Trin 3: Oprettelse af lydhøre komponenter med Chakra UI
  • Trin 4: Tilpasning af standard Chakra UI-temaet

Hvad er Chakra UI?

Chakra UI er et komponentbibliotek til React, der gør det let at oprette UI'en til en app eller et websted.

Deres mål er at tilvejebringe et simpelt, modulært og tilgængeligt sæt komponenter for at komme i gang hurtigt.

Hvad gør Chakra UI så fantastisk?

For at starte forsøger Chakra som standard at gøre hver komponent tilgængelig. Det er en kritisk del af applikationsudvikling, der ofte overses, og Chakra-vedligeholdere er gået ud af deres måde at sikre, at komponenterne følger WAI-ARIA-retningslinjerne.

Chakra inkluderer også en simpel API, der giver udviklere mulighed for at blive produktive. Det giver folk og teams mulighed for at lave inkluderende apps uden at skulle bekymre sig om at bygge en masse komponenter selv.

Til styling og tilpasning bruger Chakra Emotion under emhætten til at give udviklere mulighed for at style deres komponenter lige inde i deres JavaScript med stilrekvisitter. Det kommer med et standardtema, men giver mulighed for let at tilsidesætte det med brugerdefinerede indstillinger.

Hvad skal vi bygge?

For at få en god idé om, hvordan Chakra fungerer, vil vi i det væsentlige genopbygge standard Next.js-skabelonen med Chakra UI-komponenter.

Dette hjælper os med at forstå et par vigtige begreber, såsom hvordan vi bruger Chakra UI med Next.js, hvordan vi tilføjer brugerdefinerede stilarter med rekvisitter, og hvordan vi tilpasser Chakra UI-temaet.

Begreberne her kan stort set gælde for enhver React-app, selvom eksemplerne vil være lidt specifikke for Next.js.

Trin 0: Oprettelse af et nyt React-projekt med Next.js

For at komme i gang har vi brug for en React-app. Vi bruger Next.js som vores ramme, som giver os muligheden for let at spinde en ny app op.

Når du er inde i den mappe, du vil oprette dit projekt i, skal du køre:

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

Bemærk: Du er velkommen til at skifte my-chakra-apptil det, du vil navngive projektmappen.

Og når det er færdigt, kan du navigere ind i den mappe og starte projektet med:

yarn dev # or npm run dev 

Det skulle gøre din udviklingsserver bedre på // localhost: 3000, og vi skal være klar til at gå!

Følg med på forpligtelsen!

Trin 1: Installation og konfiguration af Chakra UI i Next.js

Lad os derefter installere Chakra UI.

Inde i dit projektkatalog skal du køre:

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

Dette installerer Chakra UI og dets afhængigheder, som inkluderer følelse, da det er afhængig af det til stylingen.

For at få Chakra til at arbejde inde i vores app, skal vi konfigurere en udbyder i roden af ​​vores applikation. Dette gør det muligt for alle Chakras komponenter at tale med hinanden og bruge konfigurationen til at opretholde ensartede stilarter.

Inden pages/_app.js, lad os først importere vores udbyder øverst:

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

Derefter skal du erstatte returerklæringen inde i komponenten med:

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

Som du bemærker, sender vi også en themevariabel til vores udbyder. Vi importerer Chakra UI-standardtemaet lige fra Chakra og sender det til vores, ThemeProviderså alle vores komponenter kan få standardformaterne og konfigurationerne.

Endelig vil vi tilføje en komponent kaldet CSSResetret som et direkte barn af vores ThemeProvider.

Tilføj først CSSResetsom import:

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

Tilføj derefter komponenten lige indeni ThemeProvider:

Og nu hvis vi genindlæser siden, kan vi se, at tingene ser lidt anderledes ud!

Browseren leveres med mange standardformater, og som standard tilsidesætter Chakra UI dem ikke. Dette inkluderer stilarter som kanter på et knapelement.

Selvom vi ikke nødvendigvis har brug for CSS-nulstilling her, kan vi tilsidesætte disse ting manuelt. Dette giver os et fundament, hvor vi ved, at Chakra UI fungerer, som det er beregnet til, og vi kan begynde at tilføje vores komponenter.

Følg med på forpligtelsen!

Trin 2: Tilføjelse af Chakra UI-komponenter til en React-app

Nu til den sjove del. Vi skal bruge Chakra UI-komponenter til at prøve at genopbygge Next.js-standardskabelonen. Det vil ikke se 100% ud nøjagtigt som det, men det vil bære ånden, og vi kan tilpasse det, som vi gerne vil.

Opbygning af titel og beskrivelse

Lad os starte med at opdatere vores titel og beskrivelse.

Øverst på siden skal vi importere vores Headingkomponent:

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

Lad os derefter erstatte

med:

 Welcome to Next.js!  

Her bruger vi overskriftskomponenten, som vi derefter indstiller "som" en h1. Vi kan bruge et hvilket som helst HTML-overskrift-tagnavn, men da vi erstatter en h1, vil vi bruge det.

Vi indstiller også en sizeattribut, der giver os mulighed for at kontrollere, hvor stor ud overskriften er såvel som mb, hvad der står for margin-bottom, så vi kan tilføje noget plads nedenfor.

Og vi kan allerede se, at vores side ligner mere standardskabelonen.

Vi vil også tilføje vores link tilbage.

Føj Linktil vores importerklæring øverst og derefter inde i vores komponent, udskift Next.js-teksten med:

Next.js! 

Chakras Link-komponent opretter et link som forventet, men giver os derefter mulighed for at bruge stilrekvisitterne til at tilpasse det. Her bruger vi den farvevariabel, teal.500som Chakra giver for at ændre vores link til Chakras farver.

Og vi kan se, at vi har vores Next.js-link!

Det sidste stykke af overskriften er beskrivelsen. Til det vil vi bruge tekstkomponenten.

Tilføj Text  og Codetil importerklæringen, og erstat beskrivelsen med:

 Get started by editing pages/index.js

Vi bruger tekstkomponenten til at genskabe en

tag og kodekomponenten for at oprette vores 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