Cómo usar la interfaz de usuario de Chakra con Next.js y React

Crear sitios web y aplicaciones es difícil. Hay muchas cosas a considerar para asegurarnos de que nuestras aplicaciones sean utilizables y accesibles, incluido cómo funcionan nuestros componentes de React.

¿Cómo podemos aprovechar el poder de la interfaz de usuario de Chakra para crear excelentes aplicaciones web?

  • ¿Qué es Chakra UI?
  • ¿Qué hace que Chakra UI sea tan genial?
  • ¿Qué vamos a construir?
  • Paso 0: Creando un nuevo proyecto React con Next.js
  • Paso 1: Instalar y configurar la interfaz de usuario de Chakra en Next.js
  • Paso 2: Agregar componentes de la interfaz de usuario de Chakra a una aplicación React
  • Paso 3: creación de componentes receptivos con Chakra UI
  • Paso 4: personalización del tema predeterminado de la interfaz de usuario de Chakra

¿Qué es Chakra UI?

Chakra UI es una biblioteca de componentes para React que facilita la creación de la interfaz de usuario de una aplicación o sitio web.

Su objetivo es proporcionar un conjunto de componentes simple, modular y accesible para comenzar a funcionar rápidamente.

¿Qué hace que Chakra UI sea tan genial?

Para empezar, por defecto Chakra se esfuerza por hacer que cada componente sea accesible. Es una parte fundamental del desarrollo de aplicaciones que a menudo se pasa por alto, y los encargados de mantenimiento de Chakra se han esforzado por garantizar que los componentes sigan las pautas de WAI-ARIA.

Chakra también incluye una API simple que permite a los desarrolladores ser productivos. Permite que las personas y los equipos creen aplicaciones inclusivas sin tener que preocuparse por crear un montón de componentes ellos mismos.

Para el estilo y la personalización, Chakra usa Emotion bajo el capó para brindar a los desarrolladores la capacidad de diseñar sus componentes directamente dentro de su JavaScript con accesorios de estilo. Viene con un tema predeterminado, pero permite la capacidad de anularlo fácilmente con configuraciones personalizadas.

¿Qué vamos a construir?

Para tener una buena idea de cómo funciona Chakra, esencialmente reconstruiremos la plantilla Next.js predeterminada con los componentes de la interfaz de usuario de Chakra.

Esto nos ayudará a comprender algunos conceptos importantes, como cómo usar la interfaz de usuario de Chakra con Next.js, cómo agregar estilos personalizados con accesorios y cómo personalizar el tema de la interfaz de usuario de Chakra.

Los conceptos aquí se pueden aplicar prácticamente a cualquier aplicación React, aunque los ejemplos serán ligeramente específicos de Next.js.

Paso 0: Creando un nuevo proyecto React con Next.js

Para comenzar, necesitamos una aplicación React. Vamos a usar Next.js como nuestro marco, lo que nos dará la capacidad de iniciar fácilmente una nueva aplicación.

Una vez dentro del directorio en el que desea crear su proyecto, ejecute:

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

Nota: siéntase libre de cambiar el my-chakra-appnombre que desee al directorio del proyecto.

Y una vez que haya terminado, puede navegar a ese directorio e iniciar el proyecto con:

yarn dev # or npm run dev 

¡Eso debería activar su servidor de desarrollo en // localhost: 3000 y deberíamos estar listos para comenzar!

¡Sigue el compromiso!

Paso 1: Instalar y configurar la interfaz de usuario de Chakra en Next.js

A continuación, instalemos Chakra UI.

Dentro del directorio de su proyecto, ejecute:

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

Esto instalará la interfaz de usuario de Chakra y sus dependencias, que incluye Emotion, ya que depende de ella para el estilo.

Para que Chakra funcione dentro de nuestra aplicación, necesitamos configurar un proveedor en la raíz de nuestra aplicación. Esto permitirá que todos los componentes de Chakra se comuniquen entre sí y usen la configuración para mantener estilos consistentes.

En el interior pages/_app.js, primero importemos nuestro proveedor en la parte superior:

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

A continuación, reemplace la declaración de devolución dentro del componente con:

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

Como notará, también le estamos pasando una themevariable a nuestro proveedor. Estamos importando el tema predeterminado de la interfaz de usuario de Chakra directamente desde Chakra y pasándolo a nuestro ThemeProviderpara que todos nuestros componentes puedan obtener los estilos y configuraciones predeterminados.

Finalmente, queremos agregar un componente llamado CSSResetright como hijo directo de nuestro ThemeProvider.

Primero, agregue CSSResetcomo importación:

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

Luego agregue el componente justo adentro ThemeProvider:

¡Y ahora, si recargamos la página, podemos ver que las cosas se ven un poco diferentes!

El navegador viene con muchos estilos predeterminados y, por defecto, la interfaz de usuario de Chakra no los anula. Esto incluye estilos como bordes en un elemento de botón.

Si bien no necesitamos necesariamente el restablecimiento de CSS aquí, podríamos anular esas cosas manualmente. Esto nos proporciona una base en la que sabremos que la interfaz de usuario de Chakra funciona como debe y podemos comenzar a agregar nuestros componentes.

¡Sigue el compromiso!

Paso 2: Agregar componentes de la interfaz de usuario de Chakra a una aplicación React

Ahora viene la parte divertida. Vamos a utilizar los componentes de la interfaz de usuario de Chakra para intentar reconstruir la plantilla predeterminada de Next.js. No se verá 100% exactamente igual, pero llevará el espíritu y podemos personalizarlo como queramos.

Construyendo el título y la descripción

Empezando desde arriba, actualicemos nuestro título y descripción.

En la parte superior de la página, necesitamos importar nuestro Headingcomponente:

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

Entonces reemplacemos el

con:

 Welcome to Next.js!  

Here, we’re using the Heading component which we then set “as” an h1. We can use any HTML heading element tag name, but since we’re replacing an h1, we want to use that.

We’re also setting a size attribute, which allows us to control how big out heading is, as well as mb, which stands for margin-bottom, allowing us to add some space below.

And we can already see our page is looking more like the default template.

We also want to add back our link.

Add Link to our import statement at the top and then inside of our component, replace the Next.js text with:

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