DEV Community: Franklin Martinez

Building a multi-language app with Vue JS. 🌐

Franklin Martinez — Sat, 13 Jan 2024 15:58:07 +0000

Today I will present you an easy way to create applications that support multiple languages, using Vue JS.

Technologies to be used.

Vue 3.3.11
@tolgee/vue 5.19.0
Vite JS 5.0.8
TypeScript 5.2.2
Tailwind CSS 3.4.0

Creating the project

To create the project with Vue, we will use vite js.
We will name the project: multi-lang-app (optional, you can name it whatever you like).

npm create vite@latest

After we set the name, we select the Vue option and then the TypeScript option (although it is not necessary for this occasion).
We create the project with Vite JS and select React with TypeScript.

Then we run the following command to navigate to the directory just created.

cd multi-lang-app

Then we install the dependencies.

npm install

Then we open the project in a code editor (in my case VS code).

code .

Installing Tailwind

We just follow the steps indicated in the Vite documentation
First we install the dependencies.

npm install -D tailwindcss postcss autoprefixer

Then run this command to create the tailwind configuration files.

npx tailwindcss init -p

Then in our tailwind.config.js file we add the following settings

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And in our style.css file we add:

@tailwind base;
@tailwind components;
@tailwind utilities;

And that's enough.

First steps.

First we are going to create a simple TO-DO list.

We create a new file src/components/MainContent.vue.
In which we will define two new states:

task: This is the description of the task.
collectionTasks: an array of tasks (and a task is composed of object that contains the description and if it is completed).

<script setup lang="ts">
import { ref } from 'vue'

interface Task {
  task: string
  isCompleted: boolean
}

const task = ref('')
const collectionTasks = ref<Task[]>([])
</script>

<template>
</template>

After that, we create two simple functions.

createTask: adds a new task to the list and resets the input where you enter the task.
handleToggleComplete: marks the task as completed.

<script setup lang="ts">

// ...

const createTask = () => {

  if(task.value.trim().length === 0) return

  collectionTasks.value.push({
    task: task.value,
    isCompleted: false
  })

  task.value = ''
}

const handleToggleComplete = (index:number) => {
  const taskSelected = collectionTasks.value.find( (_,i) => i === index )
  if(taskSelected) {
    taskSelected.isCompleted = !taskSelected?.isCompleted
  }
}
</script>

<template>
</template>

Now we continue with HTML.

Note: At this point you are supposed to have a good understanding of how to use Vue, so you should not be surprised by such characteristics that Vue uses, like the @submit.prevent, @click, v-model, v-show, v-for, v-bind (using its short form ":") or the "Mustache" syntax for text interpolation.

<script setup lang="ts">
// ...
</script>

<template>
  <div class="flex items-center flex-col gap-2 p-5">

    <h1 class="text-6xl font-black mt-28 mb-10 text-wrap">
      THIS IS THE MAIN TITLE
    </h1>

    <main class="max-w-2xl ">
      <form
        @submit.prevent="createTask"
        class="flex items-center gap-5"
      >
        <input
          type="text"
          placeholder="TASK PLACEHOLDER"
          autofocus
          v-model="task"
          class="p-3 px-4 text-xl rounded-lg flex-1 min-w-[420px]"
        />
        <button class="bg-blue-500 p-3 px-4 rounded-md hover:bg-blue-600">
          ADD NEW TASK
        </button>
      </form>

      <section
        class="bg-[#272932] p-5 rounded-md my-10"
        v-show="collectionTasks.length !== 0"
      >
        <h2
          class="mt-2 mb-5 text-3xl font-bold text-white/50 border-b pb-3 border-white/50"
        >
          SECTION LIST TASK TITLE
        </h2>

        <div
          v-for="(item, index) in collectionTasks"
          :key="index"
          class="flex items-center gap-5"
        >
          <span
            :class="['p-2 text-xl cursor-pointer', item.isCompleted && 'line-through']"
            @click="handleToggleComplete(index)"
          >
            👉 {{ item.task }}</span
          >

          <span
            v-show="item.isCompleted"
            class="p-2 rounded-lg bg-green-500/20 text-green-300 border-green-500 border text-xs"
          >
            COMPLETED
          </span>
        </div>
      </section>
    </main>
  </div>
</template>

Note that in the code above I put certain words in capital letters, this is because it is there where we want to apply the language change.
And with this we finish our mini application, we only need to show it in App.vue.

Inside the src/App.vue file, we delete everything and we place the following:

<script setup lang="ts">
import MainContent from './components/MainContent.vue';
</script>

<template>
  <MainContent />
</template>

Styles may change, check the repository at the end of this post.

Configuring the translations for the app.

Before we continue with the code, let's configure the translations, for this, we will use Tolgee.

Tolgee is a localization platform that allows you to translate your application into any language without modifying your code. It is designed for use with web applications, but can also be used with mobile apps and desktop applications."

You can learn more do about this platform on their website Tolgee.

First create an account at https://app.tolgee.io/sign_up.

Once the account is created it will take you to your projects, which will not have any created yet.

Add a new project.

Add a name to the project (example: demo-vue).
Add the languages you want to configure.
Select a base language.
Finally click on the "Save" button

Once the project is created, you will be taken to the project dashboard.
Now go to the "Translations" part which should be on the left side menu.

Add translations.

Once in the "Translations" section, press the "+" button to add a new translation. You will be asked to add the following:

key: this is the keyword that identifies the translation and must be unique. Normally they follow a convection that uses "about_page_title", see more about it in the documentation
namespaces (optional): is a key that helps to separate translations in multiple files, it is useful when you have a large app that contains many translations (more than 1000 keys)
tags: that can be used to group keys.
languages text(s): the text that should be displayed in each language.
- You can select the languages you want to display here by selecting them from the drop-down menu at the top. If you do not specify the text for a language, the key will be marked as "Untranslated" for that language.

Check that the languages in which you want to add the translation are displayed. At the top right you can select the languages you want to translate into

Note that when you add the text in the field of the language you selected as the "base language" and then move to another field to add another language, a panel with two sections will be displayed

TRANSLATION MEMORY: looks for similar texts in your project and suggests them to you. This helps you to reuse translations and save time. see more in the section translation memory
MACHINE TRANSLATION: is a way to translate content using external services and get a rough translation of the content.

Only select one option, if you do not know the exact translation.

Finally press "Save" to add the translation.

For this project I will add 3 languages "Mexican Spanish", "English" and "French".

Adding Tolgee to our project.

To add Tolgee to our project is very simple, we execute:

npm install @tolgee/vue

Now let's create a new src/lib/tolgee.ts file and add the following configuration.

First we are going to call the Tolgee function.

import { Tolgee } from '@tolgee/vue';

export const tolgee = Tolgee()

Next we are going to configure some plugins for Tolgee.

DevTools: combination of several plugins that will help us in development mode, such as communicating our app with the Tolgee platform. This plugin is omitted in production by default.
FormatSimple: This is a formatter that enables us to pass variables into translations.

To define a plugin we use the use() method.

import { Tolgee, DevTools, FormatSimple, BackendFetch } from '@tolgee/vue';

export const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())

Then we call the init method, passing it an object with the following properties.

language: the initial language of your app.
apiUrl: a URL provided by tolgee, to connect to the platform.
appKey: a KEY provided by tolgee, to connect to the platform.

This init() function has more options, but those mentioned are sufficient for the moment.

import { Tolgee, DevTools, FormatSimple, BackendFetch } from '@tolgee/vue';

export const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    language: 'es-MX',
    apiUrl: '',
    apiKey: ''
  });

Getting the API KEY.

Back to the Tolgee platform, look for the integrate section in the side menu.

A series of steps will appear:

Choose the technology you are going to use for your project.
Then you will be asked to select an API KEY. If you already have one created, if not, just select the "Create new +" option. There you can configure the name, expiration and scope.
It will show you a brief Quick start. In that part it will show you both the API_URL and API_KEY variables.

Just copy the variables into a .env file inside your project. And finally we make reference to those environment variables.

import { Tolgee, DevTools, FormatSimple, BackendFetch } from '@tolgee/vue';

export const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    language: 'es-MX',
    apiUrl: import.meta.env.VITE_APP_TOLGEE_API_URL,
    apiKey: import.meta.env.VITE_APP_TOLGEE_API_KEY
  });

Finishing the Tolgee configuration

Now in our src/App.vue file we use the tolgee plugin we created in the Vue app as follows:

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

import { VueTolgee } from '@tolgee/vue';
import { tolgee } from './lib/tolgee';

const app = createApp(App);

app.use(VueTolgee, { tolgee });

app.mount('#app');

Adding the provider

Now we need to add a provider in src/main.ts and wrap our component.

<script setup lang="ts">
import { TolgeeProvider } from '@tolgee/vue';
import MainContent from './components/MainContent.vue';
</script>

<template>
  <TolgeeProvider>
    <MainContent />
  </TolgeeProvider>
</template>

Now inside the provider we need to specify a fallback component that will be displayed while loading the default language translations.

Note that I created a separate component called Loading in src/components/Loading.vue

<script setup lang="ts">
import { TolgeeProvider } from '@tolgee/vue';
import MainContent from './components/MainContent.vue';
import Loading from './components/Loading.vue';
</script>

<template>
  <TolgeeProvider>

    <template v-slot:fallback>
      <Loading />
    </template>

    <MainContent />
  </TolgeeProvider>
</template>

And now we are ready to translate.

Translating the texts

Once the configuration is finished, we have access to several ways to translate the texts, in this case I will use the global function $t, because I don't need to import anything thanks to the configuration we did.
There are also other ways, like using a component T or a composable useTranslate

Returned in the src/components/MainContent.vue file, we use the global function $t in this way:

Inside the function, we send it the key we defined in the Tolgee platform.

<h1 class="text-6xl font-black mt-28 mb-10 text-wrap">
  {{ $t('title_page') }}
</h1>

And this way we can see how the title is correctly displayed in the default language we configured.

Now let's replace the other texts of the elements:

the placeholder of the input

<template>
<!-- all the rest ... -->
  <input
    type="text"
    :placeholder="$t('placeholder_task_input')"
    autofocus
    v-model="task"
    class="p-3 px-4 text-xl rounded-lg flex-1 min-w-[420px]"
  />
  <!-- all the rest ... -->
</template>

the button label

<button class="bg-blue-500 p-3 px-4 rounded-md hover:bg-blue-600">
  {{ $t('button_add_task') }}
</button>

the title of the listing section

<h2
  class="mt-2 mb-5 text-3xl font-bold text-white/50 border-b pb-3 border-white/50"
>
  {{ $t('title_section_list_tasks') }}
</h2>

And so on and so forth what you would like to translate.

Changing the language.

We can already show the texts, now we need to select another language to show the other translations.
For it we will create a component src/components/SelectLang.vue.

First we will create the functionality.
We will be using a tolgee composable, useTolgee.
This composable returns an instance of Tolgee allowing us to subscribe to different events

Note how we specify "language", which means we only want to listen for the event when a language changes.
Also note that we are passing an array to useTolgee, because we can listen for multiple events.

Next we create a function that will receive an event () and we will execute the changeLanguage function of tolgee, sending the value of the input.
Basically we will use a select element and every time a change is made the changeLanguage will be executed, passing the value we have selected.

<script setup lang="ts">
import { useTolgee } from '@tolgee/vue';

const tolgee = useTolgee(['language']);

const changeLanguage = (e: Event) => {
  tolgee.value.changeLanguage((e.target as HTMLSelectElement).value);
};
</script>

Finally we just implement the template.

Note that in the value attribute of the select, we are calling the getLanguage() function of tolgee, which provides us with the current language we have configured (NOT the language of your browser), which is 'en-MX'.
Note also that in the @change event of the select we are calling the function we created "changeLanguage ".
Finally note that in each option element must carry a value attribute that refers to the language, just as it is in the Tolgee platform.

<script setup lang="ts">
// ---
</script>

<template>
  <select
    :value="tolgee.getLanguage()"
    @change="changeLanguage"
    class="p-1 rounded-md text-lg font-semibold"
  >
    <option value="es-MX">🇲🇽 Spanish</option>
    <option value="en">🇺🇲 English</option>
    <option value="fr">🇫🇷 French</option>
  </select>
</template>

All right, we've finished our component to help us to switch between languages.

Now we are going to create a small NavBar to place it.

Inside src/components/NavBar.vue and place the following.

<script setup lang="ts">
import SelectLang from './SelectLang.vue';
</script>

<template>
  <nav
    class="flex justify-between items-center gap-5 bg-black/50 backdrop-blur-md fixed top-0 left-0 w-full p-7 px-10"
  >
    <div class="flex gap-5 items-center">
      <span>{{ $t('label_select_idiom') }}</span>

      <SelectLang />

    </div>
  </nav>
</template>

Don't forget to place the Navbar.vue component in src/components/MainContent.vue.

Using variables in translations

To use variables you have to make settings in the Tolgee platform.

Tolgee follow the message format ICU learn more about this format to learn more rules, as here I will only show you the most basic one.

Suppose you want to create something like this:

"Hello, 'VAR_NAME' is my name"

VAR_NAME being the variable you want to display and it can be any name.

Well when you are creating the translations in Tolgee, and you want to add a variable, you would do it this way in each translation:

You enclose the variable between these '{}' symbols.
Note that inside the square brackets is the name of the variable "name". The name that you put it must be the same in each translation and the same one that we will use in our app to make reference to that variable.

Hello, {name} is my name.

Now let's go to src/components/NavBar.vue.
Let's create a simple variable.

<script setup lang="ts">
// ....
const userName = 'Barry Allen'
</script>

<template>
  <!-- .... -->
</template>

And now to place a variable we will do it this way:

<span>{{ $t('title_navbar',{ name: userName })  }}</span>

We continue sending the key as the first parameter, then an object with the name of the property exactly as you defined it in the Tolgee platform, which in my case I put '{name}'.

And so we can use variables in our translations.

<script setup lang="ts">
import SelectLang from './SelectLang.vue';

const name = 'Barry Allen'
</script>

<template>
  <nav
    class="flex justify-between items-center gap-5 bg-black/50 backdrop-blur-md fixed top-0 left-0 w-full p-7 px-10"
  >
    <span>{{ $t('title_navbar',{ name })  }}</span>

    <div class="flex gap-5 items-center">
      <span>{{ $t('label_select_idiom') }}</span
      ><SelectLang />
    </div>
  </nav>
</template>

Preparing for production

When you are going to deploy your app to production, you will NOT include the environment variables. This is because the SDK and environment variables should only be used in development and not in production.

For production you should use the data exported from the Tolgee platform.

You have these options:

Export the data manually from the Tolgee platform.

In the Tolgee platform, in the side menu there is an "Export" option, which takes you to configure which languages you want to export and other settings.
Once you configure and export the translations in files such as JSON format files, you place them in the public/i18n folder.

And you make some settings in the src/lib/tolgee.ts file something like this.

export const tolgee = Tolgee()
  // ...
  .init({
    // ...
    staticData: {
      'es-MX': () => import('./i18n/es-MX.json'),
      fr: () => import('./i18n/fr.json'),
      en: () => import('./i18n/en.json'),
    },
  });

Use "BackendFetch" plugin

There is another easier way if you don't want to download those files. And that is by using the BackendFetch plugin.

In the Tolgee platform, go to the side menu and look for the "Developer settings" section.
Once there, in the "CONTENT DELIVERY" part you will hit the "+ CONTENT DELIVERY" button. Basically it is to deploy your translation files to a cloud storage so you can use them in your app.

When you press the button it will ask you for a couple of configurations such as the name, what languages you are going to display, in what format, among others.
Once you finish configuring that, and press "SAVE", it will create a CDN which you will use in your app.

Using the BackendFetch plugin, we pass an object with the prefix property and place the CDN we created.

export const tolgee = Tolgee()
// ...
.use(
    BackendFetch({
      prefix: 'https://cdn.tolg.ee/19c2f74a3835f11cab85f',
    })
)
.init({
  // ....
});

The best thing is that, with BackendFetch and Content delivery, when you update your translations in Tolgee, they will be reflected in your app.

Now you can deploy your app.

Simple demo.

https://vue-tolgee-multi-lang.netlify.app/

Source code.

https://github.com/Franklin361/vue-tolgee

Construyendo una app multi-lenguaje con Vue JS. 🌐

Franklin Martinez — Sat, 13 Jan 2024 15:57:55 +0000

Hoy les presentare un forma fácil de crear aplicaciones que soporten varios idiomas, usando Vue JS

Tecnologías a utilizar.

Vue 3.3.11
@tolgee/vue 5.19.0
Vite JS 5.0.8
TypeScript 5.2.2
Tailwind CSS 3.4.0

Creando el proyecto

Para crear el proyecto con Vue, usaremos vite js
Al proyecto le colocaremos el nombre de: multi-lang-app (opcional, tu le puedes poner el nombre que gustes).

npm create vite@latest

Después de colocar el nombre, seleccionamos la opción de Vue y luego la opción de TypeScript (aunque no es necesario para esta ocasión)
Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.

cd multi-lang-app

Luego instalamos las dependencias.

npm install

Después abrimos el proyecto en un editor de código (en mi caso VS code).

code .

Instalando Tailwind

Solamente seguimos los pasos que indica la documentación de Vite
Primero instalamos las dependencias.

npm install -D tailwindcss postcss autoprefixer

Después ejecutamos este comando para crear los archivos de configuración de tailwind.

npx tailwindcss init -p

Luego en nuestro archivo tailwind.config.js agregamos la siguiente configuración

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Y en nuestro archivo style.css agregamos:

@tailwind base;
@tailwind components;
@tailwind utilities;

Y eso es suficiente.

🈵 Primeros pasos.

Primero vamos a crear una TO-DO list sencillo.

Creamos un nuevo archivo src/components/MainContent.vue
En el cual definiremos dos nuevos estados:

task: Es la descripción de la tarea.
collectionTasks: un arreglo de tareas (y una tarea se compone de objeto que contiene la descripción y si esta completada).

<script setup lang="ts">
import { ref } from 'vue'

interface Task {
  task: string
  isCompleted: boolean
}

const task = ref('')
const collectionTasks = ref<Task[]>([])
</script>

<template>
</template>

Seguido de eso, creamos dos simples funciones.

createTask: agrega una nueva tarea a la lista y reinicia el input donde ingresas dicha tarea.
handleToggleComplete: marca la tarea como completada

<script setup lang="ts">

// ...

const createTask = () => {

  if(task.value.trim().length === 0) return

  collectionTasks.value.push({
    task: task.value,
    isCompleted: false
  })

  task.value = ''
}

const handleToggleComplete = (index:number) => {
  const taskSelected = collectionTasks.value.find( (_,i) => i === index )
  if(taskSelected) {
    taskSelected.isCompleted = !taskSelected?.isCompleted
  }
}
</script>

<template>
</template>

Ahora seguimos con el HTML.

Nota: En este punto se supone que deberías tener nociones de como usar Vue, asi que no se te debe hacer raro dichas características que usa Vue, como el @submit.prevent, @click, v-model, v-show, v-for, v-bind (usando su forma corta ":") o la sintaxis de "Mustache" para la interpolación de texto.

<script setup lang="ts">
// ...
</script>

<template>
  <div class="flex items-center flex-col gap-2 p-5">

    <h1 class="text-6xl font-black mt-28 mb-10 text-wrap">
      THIS IS THE MAIN TITLE
    </h1>

    <main class="max-w-2xl ">
      <form
        @submit.prevent="createTask"
        class="flex items-center gap-5"
      >
        <input
          type="text"
          placeholder="TASK PLACEHOLDER"
          autofocus
          v-model="task"
          class="p-3 px-4 text-xl rounded-lg flex-1 min-w-[420px]"
        />
        <button class="bg-blue-500 p-3 px-4 rounded-md hover:bg-blue-600">
          ADD NEW TASK
        </button>
      </form>

      <section
        class="bg-[#272932] p-5 rounded-md my-10"
        v-show="collectionTasks.length !== 0"
      >
        <h2
          class="mt-2 mb-5 text-3xl font-bold text-white/50 border-b pb-3 border-white/50"
        >
          SECTION LIST TASK TITLE
        </h2>

        <div
          v-for="(item, index) in collectionTasks"
          :key="index"
          class="flex items-center gap-5"
        >
          <span
            :class="['p-2 text-xl cursor-pointer', item.isCompleted && 'line-through']"
            @click="handleToggleComplete(index)"
          >
            👉 {{ item.task }}</span
          >

          <span
            v-show="item.isCompleted"
            class="p-2 rounded-lg bg-green-500/20 text-green-300 border-green-500 border text-xs"
          >
            COMPLETED
          </span>
        </div>
      </section>
    </main>
  </div>
</template>

Nota que en el código de arriba puse ciertas palabras en mayúsculas, esto es porque es ahí donde queremos aplicar el cambio de idioma.
Y con esto terminamos nuestra mini aplicación, solo falta mostrarla en App.vue

Dentro del archivo src/App.vue, borramos todo y colocamos lo siguiente:

<script setup lang="ts">
import MainContent from './components/MainContent.vue';
</script>

<template>
  <MainContent />
</template>

Los estilos pueden cambiar, checa el repositorio al final de este post

Configurando las traducciones para la app.

Antes de seguir con el código, vamos a configurar las traducciones, para ello, usaremos Tolgee.

"Tolgee es una plataforma de localización que te permite traducir tu aplicación a cualquier idioma sin modificar tu código. Está diseñada para su uso con aplicaciones web, pero puede utilizarse también con apps para móviles y aplicaciones de escritorio."

Puedes saber más hacer de esta plataforma en su web Tolgee

Primero creamos una cuenta en https://app.tolgee.io/sign_up.

Una vez creada la cuenta te llevara a tu proyectos, el cual no tendrá ninguno creado aun.

Agregar un proyecto nuevo.

Agregas un nombre al proyecto (ejemplo: demo-vue)
Agregas los idiomas que quieras configurar.
Seleccionas un lenguaje base.
Finalmente das click en el botón "Save"

Una vez creado el proyecto, te llevara al dashboard de dicho proyecto.
Ahora dirígete a la parte de "Translations" que debe estar en el menú lateral izquierdo.

Agregar traducciones. Una vez en la sección de "Translations", presiona el botón de "+" para agregar una nueva traducción. Te pedirá agregar los siguiente:

key: es la palabra clave que identifica la traducción y debe ser única. Normalmente siguen una convección que se usa "_" por ejemplo: "about_page_title", mira más sobre eso en la documentación
namespaces (opcional): es una llave que ayuda a separar las traducciones en multiples archivos, es util cuando tienes una app grande que contenga muchas traducciones (más de 1000 keys)
tags: que pueden ser usadas para agrupar keys.
languages text(s): El texto que debería ser desplegado en cada idioma.
- Puede seleccionar los idiomas que desea mostrar aquí seleccionándolos en el menú desplegable de la parte superior. Si no especifica el texto para un idioma, la tecla se marcará como "Untranslated" para ese idioma.

Revisa bien que se muestren los lenguajes en los que quieras agregar la traducción. En la parte superior derecha puedes seleccionar que lenguajes quieres traducir.

Nota que cuando agregas el texto en en campo del idioma que seleccionaste como "base language" y luego te colocas en otro campo para agregar otro idioma, se te despliega un panel con dos secciones

TRANSLATION MEMORY: busca textos similares en tu proyecto y te los sugiere. Esto te ayuda a reutilizar traducciones y ahorrar tiempo. mira más en la sección translation memory
MACHINE TRANSLATION: es una forma de traducir contenidos utilizando servicios externos y obtener una traducción aproximada del contenido.

Solamente selecciona una opción, si no conoces la traducción exacta.

Finalmente presiona "Save" para agregar la traducción

Para este proyecto agregare 3 idiomas "español mexicano", "inglés" y "francés".

Agregando Tolgee a nuestro proyecto.

Para agregar Tolgee a nuestra proyecto es muy sencillo, ejecutamos:

npm install @tolgee/vue

Ahora vamos a crear un nuevo archivo src/lib/tolgee.ts y agregaremos la siguiente configuración.

Primero vamos a llamar la función Tolgee.

import { Tolgee } from '@tolgee/vue';

export const tolgee = Tolgee()

Después vamos a configurar algunos plugins para Tolgee.

DevTools: combinación de varios plugins que nos ayudaran en modo desarrollo, como por ejemplo comunicar nuestra app con la plataforma de Tolgee. Este plugin es omitido en producción por defecto.
FormatSimple: Es un formateador que nos habilita poder pasar variables dentro las traducciones.

Para definir un plugin usamos el método use()

import { Tolgee, DevTools, FormatSimple, BackendFetch } from '@tolgee/vue';

export const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())

Luego llamamos el método init, pasándole un objeto con las siguientes propiedades.

language: el lenguaje inicial de tu app.
apiUrl: una URL que te proporciona tolgee, para conectarse a la plataforma.
apiKey: una KEY que te proporciona tolgee, para conectarse a la plataforma.

Esta función init() tiene mas propiedades, pero las que mencionamos son suficientes por el momento.

import { Tolgee, DevTools, FormatSimple, BackendFetch } from '@tolgee/vue';

export const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    language: 'es-MX',
    apiUrl: '',
    apiKey: ''
  });

Obteniendo la API KEY.

Volvemos a la plataforma Tolgee, buscamos en el menú lateral la sección de integrate.

Te aparecerá una serie de pasos:

Escoger la tecnología que vas a usar para tu proyecto.
Después te pedirá seleccionar una API KEY. Si es que ya tienes una creada, si no, solo selecciona la opción de "Create new +". Ahi mismo puedes configurar el nombre, expiración y el alcance.
Te mostrara un breve Quick start. En esa parte te mostrara tanto la variable API_URL y API_KEY.

Solo copia las variables en un archivo .env dentro de tu proyecto. Y finalmente hacemos referencia a dichas variables de entorno.

import { Tolgee, DevTools, FormatSimple, BackendFetch } from '@tolgee/vue';

export const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    language: 'es-MX',
    apiUrl: import.meta.env.VITE_APP_TOLGEE_API_URL,
    apiKey: import.meta.env.VITE_APP_TOLGEE_API_KEY
  });

Terminando la configuración de Tolgee

Ahora en nuestro archivo src/main.ts usamos el plugin de tolgee que hemos creado en la app de Vue de la siguiente manera:

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

import { VueTolgee } from '@tolgee/vue';
import { tolgee } from './lib/tolgee';

const app = createApp(App);

app.use(VueTolgee, { tolgee });

app.mount('#app');

Agregando el proveedor

Ahora necesitamos agregar un proveedor en src/App.vue y envolvemos nuestro componente

<script setup lang="ts">
import { TolgeeProvider } from '@tolgee/vue';
import MainContent from './components/MainContent.vue';
</script>

<template>
  <TolgeeProvider>
    <MainContent />
  </TolgeeProvider>
</template>

Ahora dentro del proveedor necesitamos especificar un componente fallback que se mostrará mientras se carga las traducciones del idioma que esta por defecto.

Nota que cree un componente por separado llamado Loading en src/components/Loading.vue

<script setup lang="ts">
import { TolgeeProvider } from '@tolgee/vue';
import MainContent from './components/MainContent.vue';
import Loading from './components/Loading.vue';
</script>

<template>
  <TolgeeProvider>

    <template v-slot:fallback>
      <Loading />
    </template>

    <MainContent />
  </TolgeeProvider>
</template>

Y ahora ya estamos listos para traducir.

Traduciendo los textos

Una vez terminada la configuración, tenemos acceso a varias formas de traducir los textos, en este caso usare la función global $t, porque no necesito importar nada gracias a la configuración que hicimos.
También existen otras formas, como usar un componente T o un composable useTranslate

Devuelta en el archivo src/components/MainContent.vue, usamos la función global $t de esta manera:

Dentro de la función, le mandamos la key que definimos en la plataforma de Tolgee.

<h1 class="text-6xl font-black mt-28 mb-10 text-wrap">
  {{ $t('title_page') }}
</h1>

Y de esta manera vemos como se muestra correctamente el titulo en el lenguaje por defecto que configuramos.

Ahora vamos a remplazar los demás textos de los elementos:

el placeholder del input

<template>
<!-- all the rest ... -->
  <input
    type="text"
    :placeholder="$t('placeholder_task_input')"
    autofocus
    v-model="task"
    class="p-3 px-4 text-xl rounded-lg flex-1 min-w-[420px]"
  />
  <!-- all the rest ... -->
</template>

el label del botón

<button class="bg-blue-500 p-3 px-4 rounded-md hover:bg-blue-600">
  {{ $t('button_add_task') }}
</button>

el titulo de la sección del listado

<h2
  class="mt-2 mb-5 text-3xl font-bold text-white/50 border-b pb-3 border-white/50"
>
  {{ $t('title_section_list_tasks') }}
</h2>

Y asi sucesivamente lo que te gustaría traducir.

Cambiando el idioma.

Ya podemos mostrar los textos, ahora necesitamos seleccionar otro idioma para mostrar las otras traducciones.
Para ello crearemos un componente src/components/SelectLang.vue

Primero crearemos la funcionalidad.
Estaremos usando un composable de tolgee, useTolgee.
Dicho composable nos retorna una instancia de Tolgee permitiendo suscribirnos a diferentes eventos

Nota como especificamos "language", lo que significa que solamente queremos escuchar el evento cuando un idioma cambia.
También nota que estamos pasándole un arreglo a useTolgee, debido a que podemos escuchar varios eventos.

Después creamos una función que recibirá un evento () y vamos a ejecutar la función changeLanguage de tolgee, mandando el valor del input.
Básicamente usaremos un elemento select y cada vez que se haga un cambio se ejecutara el changeLanguage, pasando el valor que hemos seleccionado.

<script setup lang="ts">
import { useTolgee } from '@tolgee/vue';

const tolgee = useTolgee(['language']);

const changeLanguage = (e: Event) => {
  tolgee.value.changeLanguage((e.target as HTMLSelectElement).value);
};
</script>

Finalmente solo implementamos el template.

Nota que en el atributo value del select, estamos llamando la función getLanguage() de tolgee, el cual nos provee el idioma actual que hemos configurado (NO es el idioma de tu navegador), que en es 'es-MX'.
Nota también que en en evento @change del select estamos llamando la función que creamos "changeLanguage".
Por último nota que en cada elemento option debe llevar un atributo value que hace referencia al lenguaje, justo como esta en la plataforma de Tolgee.

<script setup lang="ts">
// ---
</script>

<template>
  <select
    :value="tolgee.getLanguage()"
    @change="changeLanguage"
    class="p-1 rounded-md text-lg font-semibold"
  >
    <option value="es-MX">🇲🇽 Spanish</option>
    <option value="en">🇺🇲 English</option>
    <option value="fr">🇫🇷 French</option>
  </select>
</template>

Listo, tenemos nuestro componente para cambiar de idioma nuestra app.

Ahora vamos a crear un pequeño NavBar para colocarlo.

Dentro de src/components/NavBar.vue y colocamos lo siguiente.

<script setup lang="ts">
import SelectLang from './SelectLang.vue';
</script>

<template>
  <nav
    class="flex justify-between items-center gap-5 bg-black/50 backdrop-blur-md fixed top-0 left-0 w-full p-7 px-10"
  >
    <div class="flex gap-5 items-center">
      <span>{{ $t('label_select_idiom') }}</span>

      <SelectLang />

    </div>
  </nav>
</template>

No olvides colocar el componente Navbar.vue en src/components/MainContent.vue

Usando variables en las traducciones

Para usar variables tienes hacer configuraciones en la plataforma de Tolgee.

Tolgee siguen el formato de mensaje ICU aprende más de este formato para aprender más reglas, ya que aquí solo te voy a mostrar la más básica.

Supongamos que quieres crear algo como esto:

"Hola, 'VAR_NAME' es mi nombre"

Siendo VAR_NAME la variable que quieres mostrar y puede ser cualquier nombre.

Bueno cuando estés creando las traducciones en Tolgee, y quieras agregar una variable, lo harías de esta forma en cada traducción:

Se encierra la variable entre estos símbolos '{}'.
Nota que dentro de los corchetes esta el nombre de la variable "name". El nombre que le coloques debe ser el mismo en cada traducción y el el mismo que usaremos en nuestra app para hacer referencia a esa variable.

Hola, {name} es mi nombre.

Ahora vamos al src/components/NavBar.vue
Vamos a crear una simple variable.

<script setup lang="ts">
// ....
const userName = 'Barry Allen'
</script>

<template>
  <!-- .... -->
</template>

Y ahora para colocar una variable lo haremos de esta manera:

<span>{{ $t('title_navbar',{ name: userName })  }}</span>

Seguimos mandando la key como primer parámetro, después un objeto con el nombre de la propiedad exactamente como la definiste en la plataforma de Tolgee, que en mi caso le puse '{name}'.

Y asi podemos usar variables en nuestras traducciones.

<script setup lang="ts">
import SelectLang from './SelectLang.vue';

const name = 'Barry Allen'
</script>

<template>
  <nav
    class="flex justify-between items-center gap-5 bg-black/50 backdrop-blur-md fixed top-0 left-0 w-full p-7 px-10"
  >
    <span>{{ $t('title_navbar',{ name })  }}</span>

    <div class="flex gap-5 items-center">
      <span>{{ $t('label_select_idiom') }}</span
      ><SelectLang />
    </div>
  </nav>
</template>

Preparando para producción

Cuando vayas a desplegar tu app a producción, NO vas a incluir las variables de entorno. Esto es porque el SDK y las variables de entorno solo deben ser usadas en el desarrollo y no en producción.

Para producción debes usar los datos exportados de la plataforma de Tolgee.

Tienes estas opciones:

Exportar los datos manualmente de la plataforma Tolgee.

En la plataforma de Tolgee, en el menu lateral hay una opción "Export", que te lleva a configurar que lenguajes quieres exportar y otras configuraciones.
Una vez que configuras y exportas las traducciones en archivos como por ejemplo archivos formato JSON, los colocas en la carpeta public/i18n.

Y haces unas configuraciones en el archivo src/lib/tolgee.ts algo asi.

export const tolgee = Tolgee()
  // ...
  .init({
    // ...
    staticData: {
      'es-MX': () => import('./i18n/es-MX.json'),
      fr: () => import('./i18n/fr.json'),
      en: () => import('./i18n/en.json'),
    },
  });

Usar plugin BackendFetch

Existe otra forma más fácil si es que no quieres descargar esos archivos. Y es usando el plugin BackendFetch

En la plataforma de Tolgee, ve al menú lateral y busca la sección de "Developer settings".
Una vez ahí, en la parte de "CONTENT DELIVERY" le darás al botón "+ CONTENT DELIVERY". Básicamente es para desplegar tus archivos de traducción en un almacenamiento en la nube y puedas usarlos en tu app.

Al presionar el botón te pedirá un par de configuraciones como el nombre, que lenguajes vas a desplegar, en que formato, entre otros.
Una vez que terminas de configurar eso, y presionas "SAVE", te creara una CDN la cual usaras en tu app.

Mediante el plugin de BackendFetch, le pasamos un objeto con la propiedad prefix y colocamos la CDN que creamos.

export const tolgee = Tolgee()
// ...
.use(
    BackendFetch({
      prefix: 'https://cdn.tolg.ee/19c2f74a3835f11cab85f',
    })
)
.init({
  // ....
});

Lo mejor es que, con el BackendFetch y "Content delivery", cuando actualices tus traducciones en Tolgee, estos se reflejaran en tu app.

Ahora si puedes desplegar tu app.

🈵 Demostración simple.

https://vue-tolgee-multi-lang.netlify.app/

🈵 Código fuente.

https://github.com/Franklin361/vue-tolgee

Administrando el estado con React Query. 〽️

Franklin Martinez — Fri, 17 Mar 2023 15:17:06 +0000

React Query es una librería grande y completa que facilita el trabajo a la hora de realizar peticiones del lado del cliente hacia el servidor e incluso realiza mucho mas que eso.

Pero ¿Sabias que puedes usar esta librería como administrador de estado?, posiblemente una alternativa a redux-toolkit, zustand, entre otros. En este articulo te mostrare como implementarlo de esta manera.

🚨 Nota: para entender este articulo debes de tener conocimiento básico de como se usa React Query y también algo de conocimiento básico con TypeScript.

Tabla de contenido.

📌 Tecnologías a utilizar.

📌 Creando el proyecto.

📌 Primeros pasos.

📌 Creando las paginas.

📌 Configurando React Query.

📌 Usando React Query como administrador de estado.

📌 Creando las funciones para hacer las peticiones.

📌 Obteniendo los datos con React Query.

📌 Agregando nueva data a nuestro estado.

📌 Eliminando los datos del estado.

📌 Actualizando los datos del estado.

📌 Conclusión.

📌 Demostración.

📌 Código fuente.

📢 Tecnologías a utilizar.

React JS 18.2.0
React Query 4.20.4
React Router Dom 6.6.1
TypeScript 4.9.3
Vite JS 4.0.0
CSS vanilla (Los estilos los encuentras en el repositorio al final de este post)

📢 Creando el proyecto.

Al proyecto le colocaremos el nombre de: state-management-rq (opcional, tu le puedes poner el nombre que gustes).

npm create vite@latest

Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.

cd state-management-rq

Luego instalamos las dependencias.

npm install

Después abrimos el proyecto en un editor de código (en mi caso VS code).

code .

📢 Primeros pasos.

Primero vamos a instalar react router dom para poder crear un par de paginas en nuestra app.

npm install react-router-dom

Entonces, vamos a crear una carpeta src/layout para crear un menu de navegación muy sencillo que estará en todas las paginas.
Dentro de src/layout creamos el archivo index.tsx y agregamos lo siguiente:

import { NavLink, Outlet } from 'react-router-dom'

type LinkActive = { isActive: boolean }

const isActiveLink = ({ isActive }: LinkActive) => `link ${isActive ? 'active' : ''}`

export const Layout = () => {
    return (
        <>
            <nav>
                <NavLink className={isActiveLink} to="/">Home 🏠</NavLink>
                <NavLink className={isActiveLink} to="/create">Create ✍️</NavLink>
            </nav>

            <hr className='divider' />

            <div className='container'>
                <Outlet />
            </div>
        </>
    )
}

Luego en el archivo src/App.tsx vamos a borrar todo. Y vamos a crear nuestras rutas básicas.

Nota: Vamos a establecer las rutas mediante mediante createBrowserRouter, pero si deseas puedes usar los componentes que aun dispone react-router-dom como <BrowserRouter/>, <Routes/>, <Route/>, etc. en vez de createBrowserRouter

Mediante createBrowserRouter vamos crear un objeto donde iremos agregando nuestras rutas. Nota que solo tengo un ruta padre, y lo que muestro es el menu de navegación, y esta ruta tiene 3 rutas hijas, que por el momento no se han creado sus paginas.

Finalmente creamos el componente App que exportamos por defecto, este componente va a renderizar un componente de react-router-dom que es el <RouterProvider/> que recibe el router que acabamos de crear.

Y con esto ya podemos navegar entre las diferentes rutas.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Layout } from './layout';
import { Home } from './pages/home';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <>create</>,
      },
      {
        path: "/create",
        element: <>create</>,
      },
      {
        path: "/:id",
        element: <>edit</>,
      },
    ]
  }
]);

const App = () => ( <RouterProvider router={router} /> )

export default App

Luego volveremos a este archivo para agregar mas cosas 👀.

📢 Creando las paginas.

Ahora vamos a crear las tres paginas para las rutas que definimos con anterioridad.
Creamos una carpeta nueva src/pages y dentro creamos 3 archivos.

home.tsx

En este archivo solo vamos a listar los datos que vendrán de la API, asi que por el momento solo pondremos lo siguiente:

import { Link } from 'react-router-dom'

export const Home = () => {
    return (
        <>
            <h1>Home</h1>

            <div className="grid">
                <Link to={`/1`} className='user'>
                    <span>username</span>
                </Link>
            </div>
        </>
    )
}

createUser.tsx.

Esta pagina es solo para crear nuevos usuarios o sea nueva data. Por lo cual crearemos un formulario. En esta ocasión no voy a usar un estado para controlar el input del formulario, sino simplemente usare el evento que emite el formulario cuando ejecute el onSubmit del mismo (Es importante ponerle el atributo name al input).

export const CreateUser = () => {

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        const form = e.target as HTMLFormElement
        const data = Object.fromEntries(new FormData(form))

        // TODO: create new user

        form.reset()
    }

    return (
        <div>
            <h1>Create User</h1>
            <form onSubmit={handleSubmit} className='mt'>
                <input name='user' type="text" placeholder='Add new user' />

                <button>Add User</button>
            </form>
        </div>
    )
}

editUser.tsx

En esta pagina se editara el usuario seleccionado, obtendremos su ID mediante los parámetros de la URL, tal como lo establecimos cuando creamos el router.

import { useParams } from 'react-router-dom';

export const EditUser = () => {
    const params = useParams()

    const { id } = params

    if (!id) return null

    return (
        <>
            <span>Edit user {id}</span>
        </>
    )
}

Ahora necesitamos colocar estas paginas en el router!

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Layout } from './layout';
import { CreateUser } from './pages/createUser';
import { EditUser } from './pages/editUser';
import { Home } from './pages/home';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "/create",
        element: <CreateUser />,
      },
      {
        path: "/:id",
        element: <EditUser />,
      },
    ]
  }
]);

const App = () => (
    <RouterProvider router={router} />
)

export default App

📢 Configurando React Query.

Primero instalaremos la librería.

npm install @tanstack/react-query

Luego configuramos el proveedor en el archivo src/App.tsx

Primero crearemos el queryClient.

Para esta ocasión vamos a dejar estas opciones, que nos ayudaran a usar React Query también como un administrador de estado:

refetchOnWindowFocus: Cuando sales de tu app y luego vuelves React Query vuelve hacer la petición de la data.
refetchOnMount: Cuando el componente se vuelve a montar entonces volverá a hacer la petición.
retry: Número de veces que se volverá a intentar la petición.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      retry: 1,
    },
  },
});

Luego necesitamos importar el proveedor que nos ofrece React Query y mandarle el queryClient que acabamos de crear.

const App = () => (
  <QueryClientProvider client={queryClient}>
    <RouterProvider router={router} />
  </QueryClientProvider>
)

Y finalmente, aunque es opcional, pero la verdad es muy muy util, instalaremos las devtools de React Query, que ayudaran mucho.

npm install @tanstack/react-query-devtools

Ahora colocamos las devtools dentro del proveedor de React Query.

El archivo quedaría asi finalmente.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Layout } from './layout';
import { CreateUser } from './pages/createUser';
import { EditUser } from './pages/editUser';
import { Home } from './pages/home';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "/create",
        element: <CreateUser />,
      },
      {
        path: "/:id",
        element: <EditUser />,
      },
    ]
  }
]);

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      retry: 1
    },
  },
});

const App = () => (
  <QueryClientProvider client={queryClient}>
    <ReactQueryDevtools initialIsOpen={false} />
    <RouterProvider router={router} />
  </QueryClientProvider>
)

export default App

📢 Usando React Query como administrador de estado.

Primero crearemos las queryFn que ejecutaremos.

📢 Creando las funciones para hacer las peticiones.

Vamos a crear una carpeta src/api, y crearemos el archivo user.ts, aquí tendremos las funciones para hacer las peticiones, a la API.
Para no demorar mas tiempo en crear una API, usaremos JSON place holder ya que nos permitirá hacer un "CRUD" y no solo peticiones GET.

Crearemos 4 funciones para hacer el CRUD.

Primero establecemos las constantes y la interfaz

La interfaz, es la siguiente:

export interface User {
    id: number;
    name: string;
}

Y las constantes son:

import { User } from '../interface';

const URL_BASE = 'https://jsonplaceholder.typicode.com/users'
const headers = { 'Content-type': 'application/json' }

Primero haremos una función para pedir los usuarios. esta función debe retornar una promesa.

export const getUsers = async (): Promise<User[]> => {
    return await (await fetch(URL_BASE)).json()
}

Luego la función para crear un nuevo usuario, que recibe un usuario y retorna una promesa que resuelve el nuevo usuario.

export const createUser = async (user: Omit<User, 'id'>): Promise<User> => {
    const body = JSON.stringify(user)
    const method = 'POST'
    return await (await fetch(URL_BASE, { body, method, headers })).json()
}

Otra función para editar un usuario, que recibe el usuario a editar y retorna una promesa que resuelve el usuario editado.

export const editUser = async (user: User): Promise<User> => {
    const body = JSON.stringify(user)
    const method = 'PUT'
    return await (await fetch(`${URL_BASE}/${user.id}`, { body, method, headers })).json()
}

Finalmente, una función para eliminar el usuario, que recibe un id. Y como al eliminar un registro de la API, este no regresa nada, entonces regresaremos una promesa que resuelva el id para identificar que usuario fue eliminado.

export const deleteUser = async (id: number): Promise<number> => {
    const method = 'DELETE'
    await fetch(`${URL_BASE}/${id}`, { method })
    return id
}

Asi quedaría este archivo:

import { User } from '../interface';

const URL_BASE = 'https://jsonplaceholder.typicode.com/users'
const headers = { 'Content-type': 'application/json' }

export const getUsers = async (): Promise<User[]> => {
    return await (await fetch(URL_BASE)).json()
}

export const createUser = async (user: Omit<User, 'id'>): Promise<User> => {
    const body = JSON.stringify(user)
    const method = 'POST'
    return await (await fetch(URL_BASE, { body, method, headers })).json()
}

export const editUser = async (user: User): Promise<User> => {
    const body = JSON.stringify(user)
    const method = 'PUT'
    return await (await fetch(`${URL_BASE}/${user.id}`, { body, method, headers })).json()
}

export const deleteUser = async (id: number): Promise<number> => {
    const method = 'DELETE'
    await fetch(`${URL_BASE}/${id}`, { method })
    return id
}

📢 Obteniendo los datos con React Query.

En vez de colocar el código de React Query directamente en el componente, los colocaremos de una vez en un custom hook para tener centralizado nuestro código en un solo lugar.

Asi que crearemos una carpeta src/hook y dentro un archivo llamado useUser.tsx

El primer custom hook que crearemos sera el de useGetUsers el cual solo retorna las propiedades que regresa el hook de useQuery.

Cabe notar que useQuery, necesita de 2 parámetros, un arreglo de strings para identificar la query, y el segundo parámetro la función que hemos realizado anteriormente que es para obtener los usuarios de la API.

import { useQuery } from '@tanstack/react-query';
import { getUsers } from '../api/user';

const key = 'users'

export const useGetUsers = () => {
    return useQuery([key], getUsers);
}

Ahora, toca usar useGetUsers. Como notaras, es lo mismo que si usamos useQuery, pero sin necesitar establecer la queryKey y la queryFn, asiéndolo mas fácil de leer

import { Link } from 'react-router-dom'
import { useGetUsers } from '../hook/useUser'

export const Home = () => {

    const { data, isLoading, isError } = useGetUsers()

    return (
        <>
            <h1>Home</h1>

            {isLoading && <span>fetching a character...</span>}
            {isError && <span>Ups! it was an error 🚨</span>}

            <div className="grid">
                {
                    data?.map(user => (
                        <Link to={`/${user.id}`} key={user.id} className='user'>
                            <span>{user.name}</span>
                        </Link>
                    ))
                }
            </div>
        </>
    )
}

Hasta aquí, solo hemos establecido la data y guardando los estos datos en la cache (que actuara como nuestra store que almacena el estado), aun no hemos usado/modificado el estado de este componente en algún otro lugar.

📢 Agregando nueva data a nuestro estado.

Vamos a src/hooks/useUser.tsx y crearemos un nuevo custom hook para crear nuevos usuarios.

export const useCreateUser = () => {}

En esta ocasión y en las que siguen, usaremos useMutation ya que vamos a ejecutar una petición de tipo POST, para crear un nuevo registro.

useMutation recibe la queryFn a ejecutar, en este caso le pasaremos la función que creamos para agregar un nuevo usuario.

export const useCreateUser = () => {
    return useMutation(createUser)
}

Le pasaremos un segundo parámetro que sera un objeto, el cual accederemos a la propiedad onSuccess que es una función que se ejecuta cuando la petición ha resultado exitosa.

onSuccess recibe varios parámetros, y usaremos el primero que es la data que regresa la función createUser que en este caso debe ser el usuario nuevo.

export const useCreateUser = () => {

return useMutation(createUser, {
        onSuccess: (user: User) => {}
    })
}

Ahora lo que queremos es acceder a la cache (o sea nuestro estado) y agregar este nuevo usuario creado.

Para esta tarea usaremos otro hook de React Query, useQueryClient

Nota: No desestructures ninguna propiedad del hook useQueryClient porque perderás la referencia y dicha propiedad no funcionara como tu quieres.

Ahora, dentro del cuerpo de la función de onSuccess, vamos a establecer el nuevo dato, mediante la propiedad setQueryData.

setQueryData, necesita 2 parámetros, el primero es la queryKey para identificar que parte de la cache vas a obtener los datos y modificarlos.

export const useCreateUser = () => {
    const queryClient = useQueryClient();

    return useMutation(createUser, {
        onSuccess: (user: User) => {
            queryClient.setQueryData([key])
        }
    })
}

El segundo parámetro es la función para establecer la nueva data. La cual debe recibir por parámetro, la data que ya esta en la cache, que en este caso puede ser un arreglo de usuarios o undefined.

Lo que se hará, sera una validación, donde si ya existen usuarios en la cache, solamente agregamos el nuevo usuario y esparcimos los usuarios anteriores, de lo contrario solo retornamos el usuario creado en un arreglo.

export const useCreateUser = () => {
    const queryClient = useQueryClient();

    return useMutation(createUser, {
        onSuccess: (user: User) => {

            queryClient.setQueryData([key],
                (prevUsers: User[] | undefined) => prevUsers ? [user, ...prevUsers] : [user]
            )

            // queryClient.invalidateQueries([key])
        }
    })
}

Nota: Observa la linea comentada en el código anterior
queryClient.invalidateQueries([key])
Esta linea de código, sirve para invalidar la cache y volver a pedir los datos al servidor. Es lo que normalmente quieres hacer cuando haces algún tipo de petición POST, PUT, DELETE, etc.

En mi caso, comento esta linea, porque la API JSON placeholder no modifica los datos, solo simula hacerlo. Por lo que si yo hago una petición DELETE para eliminar un registro y todo sale bien y luego coloco invalidateQueries pues me regresara de nuevo todos los usuarios y parecerá que no hubo algún cambio en la data.

Una vez aclarado esto, usaremos el custom hook en src/pages/createUser.tsx

Establecemos el custom hook, en este caso, puedes desestructurar las props que retorna este hook pero yo no lo hare solo por gusto. (Aunque cuando usemos mas de un hook, esta sintaxis sera una buena opción para evitar conflicto con los nombres de las props)

    const create_user = useCreateUser()

Ahora en el handleSubmit, accederemos a la propiedad mutateAsync, y gracias a TypeScript sabemos que argumentos debemos pasar, el cual es el nombre del nuevo usuario.

await create_user.mutateAsync({ name: data.user as string  })

Si te preguntas de donde sacamos este argumento, pues es de la función, pues es de la función de crearUsuario del archivo src/>api/user.ts, depende de lo que reciba como parámetro, es lo que enviaremos como argumento.

Y la pagina quedaría de este manera:

import { useCreateUser } from '../hook/useUser'

export const CreateUser = () => {

    const create_user = useCreateUser()

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        const form = e.target as HTMLFormElement
        const data = Object.fromEntries(new FormData(form))

        await create_user.mutateAsync({ name: data.user as string })

        form.reset()
    }

    return (
        <div>
            <h1>Create User</h1>
            <form onSubmit={handleSubmit} className='mt'>
                <input name='user' type="text" placeholder='Add new user' />
                {create_user.isLoading && <span>creating user...</span>}
                <button>Add User</button>
                {create_user.isSuccess && <span>User created successfully ✅</span>}
                {create_user.isError && <span>Ups! it was an error 🚨</span>}
            </form>
        </div>
    )
}

📢 Eliminando los datos del estado.

Ahora toca eliminar datos, y los paso son similares que cuando creamos datos.

Creamos el custom hook,useDeleteUser.
Usamos useMutation, mandando la función a ejecutar, deleteUser.
Accedemos a la propiedad onSuccess, para ejecutar la función
Usamos useQueryClient para modificar la data en la cache, una vez que sea exitosa la petición.
Mandamos la queryKey a la propiedad setQueryData, y el función, validamos si existen datos, en el caso de que si, filtramos la data por el ID que recibimos del onSuccess y excluimos al usuario que acabamos de eliminar, regresando el nuevo arreglo sin el usuario eliminado.

export const useDeleteUser = () => {

    const queryClient = useQueryClient();

    return useMutation(deleteUser, {
        onSuccess: (id) => {
            queryClient.setQueryData([key],
                (prevUsers: User[] | undefined) => prevUsers ? prevUsers.filter(user => user.id !== id) : prevUsers
                // queryClient.invalidateQueries([key])
            )
        }
    });
}

Usamos nuestro custom hook en src/pages/editUser.tsx

Pero antes vamos a separar en componentes diferentes las acciones a realizar. Primero crearemos un componente en el mismo archivo, lo nombraremos DeleteUser el cual recibe el id del usuario a eliminar.

import { useParams } from 'react-router-dom';
import { useDeleteUser } from '../hook/useUser';
import { User } from '../interface';

export const EditUser = () => {
    const params = useParams()

    const { id } = params

    if (!id) return null

    return (
        <>
            <DeleteUser id={+id} />
        </>
    )
}

DeleteUser tendrá lo siguiente.

Establecemos el custom hook useDeleteUser y accedemos al método mutateAsync para realizar ejecutar la petición y le mandamos el id.

export const DeleteUser = ({ id }: Pick<User, 'id'>) => {
    const delete_user = useDeleteUser()

    const onDelete = async () => {
        await delete_user.mutateAsync(id)
    }

    return (
        <>
            {delete_user.isLoading && <span>deleting user...</span>}

            <button onClick={onDelete}>Delete User</button>

            {delete_user.isSuccess && <span>User deleted successfully ✅, go back home</span>}
            {delete_user.isError && <span>Ups! it was an error 🚨</span>}
        </>
    )
}

Y listo, una vez eliminado, regresas a la pagina Home y notaras que se ha eliminado correctamente el usuario. Claro que si refrescas en navegador, este usuario vuelve aparecer porque estamos usando JSON placeholder.

📢 Actualizando los datos del estado.

Ahora toca actualizar un usuario siguiendo los mismos pasos.

Creamos el custom hook,useEditUser.
Usamos useMutation, mandando la función a ejecutar, editUser.
Accedemos a la propiedad onSuccess, para ejecutar la función
Usamos useQueryClient para modificar la data en la cache, una vez que sea exitosa la petición.
Mandamos la queryKey a la propiedad setQueryData, y el función, validamos si existen datos, en el caso de que si, identificamos el usuario que se modifico mediante el ID y le asignamos su nuevo valor ya modificado.

export const useEditUser = () => {
    const queryClient = useQueryClient();

    return useMutation(editUser, {
        onSuccess: (user_updated: User) => {

            queryClient.setQueryData([key],
                (prevUsers: User[] | undefined) => {
                    if (prevUsers) {
                        prevUsers.map(user => {
                            if (user.id === user_updated.id) {
                                user.name = user_updated.name
                            }
                            return user
                        })
                    }
                    return prevUsers
                }
            )
        }
    })
}

Ahora vamos a src/pages/editUser.tsx y crearemos 2 componentes mas para mostrarte un inconveniente.
Creamos los componentes ViewUser para ver el usuario y EditUser que sera un formulario para editar el usuario.

import { useParams } from 'react-router-dom';
import { useDeleteUser, useEditUser, useGetUsers } from '../hook/useUser';
import { User } from '../interface';

export const EditUser = () => {
    const params = useParams()

    const { id } = params

    if (!id) return null

    return (
        <>
            <ViewUser id={+id} />
            <EditUserForm id={+id} />
            <DeleteUser id={+id} />
        </>
    )
}

ViewUser recibe el id, y hace uso del useGetUsers para traer todos los usuarios (lo cual no dispara otra petición, sino que accede a los que están en la cache).
Filtramos el usuario y lo mostramos en pantalla.

export const ViewUser = ({ id }: Pick<User, 'id'>) => {

    const get_users = useGetUsers()

    const user_selected = get_users.data?.find(user => user.id === +id)

    if (!user_selected) return null

    return (
        <>
            <h1>Edit user: {id}</h1>
            <span>User name: <b>{user_selected?.name}</b></span>
        </>
    )
}

EditUser, también recibe un ID. De hecho este componente es bastante igual al de la pagina createUser.tsx, que incluso pueden reutilizarlo, pero en mi caso no lo hare.

Pasamos a usar el custom hook useEditUser, accedemos a su método mutateAsync y le pasamos los argumentos necesarios. Y listo ya podrás editar el usuario seleccionado.


export const EditUserForm = ({ id }: Pick<User, 'id'>) => {

    const edit_user = useEditUser()

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        const form = e.target as HTMLFormElement
        const data = Object.fromEntries(new FormData(form))
        await edit_user.mutateAsync({ name: data.user as string, id })
        form.reset()
    }

    return (
        <>
            <form onSubmit={handleSubmit}>
                <input name='user' type="text" placeholder='Update this user' />
                {edit_user.isLoading && <span>updating user...</span>}
                <button>Update User</button>
                {edit_user.isSuccess && <span>User updated successfully ✅</span>}
                {edit_user.isError && <span>Ups! it was an error 🚨</span>}
            </form>
        </>
    )
}

Pero cuidado, notaras que cuando un usuario se actualiza correctamente, el componente ViewUser no se renderiza, o sea mantiene el valor del nombre del usuario anterior. Pero si regresas a la pagina Home, notaras que el nombre del usuario si se actualizo.

Esto es debido a que se necesita un nuevo renderizado para que cambien el componente ViewUser.

Para ello se me ocurre una solución. Crear un nuevo custom hook que maneje un observable y estar pendiente de los cambios en cierta parte de la cache.

En este custom hook vamos a usar el otros custom hook useGetUsers y el hook useQueryClient.

Primero usamos el useGetUsers y retornamos sus props, pero sobrescribimos la prop data, ya que es la que tenemos que estar al pendiente de cambios.

export const useGetUsersObserver = () => {

    const get_users = useGetUsers()

    return {
      ...get_users,
        data:[],
    }
}

Creamos un estado para manejar el arreglo de usuarios, y ese estado se lo asignamos a la prop data.

export const useGetUsersObserver = () => {

    const get_users = useGetUsers()

    const [users, setUsers] = useState<User[]>()

    return {
        ...get_users,
        data: users,
    }
}

Inicializamos el estado con la data existente en la cache, en caso de que no haya datos en la cache retornamos un arreglo vació. Esto lo logramos usando el hook useQueryClient y su propiedad getQueryData

export const useGetUsersObserver = () => {

    const get_users = useGetUsers()

    const queryClient = useQueryClient()

    const [users, setUsers] = useState<User[]>(() => {

        const data = queryClient.getQueryData<User[]>([key])
        return data ?? []
    })

    return {
        ...get_users,
        data: users,
    }
}

Ahora si usaremos un efecto para manejar el observador. Dentro creamos una nueva instancia de QueryObserver que requiere dos argumentos, el queryClient y un objeto donde necesita la queyKey para saber que parte de la cache se estará observando.

useEffect(() => {
    const observer = new QueryObserver<User[]>(queryClient, { queryKey: [key] })

}, [])

Ahora necesitamos suscribirnos al observador, por lo que ejecutamos la propiedad subscribe del observer. El subscribe recibe un callback el cual devuelve un objeto que es básicamente las mismas propiedades que devuelve un hook como useQuery por lo que validamos si en la propiedad data existe data, entonces actualizamos el estado con esta nueva data.

useEffect(() => {
    const observer = new QueryObserver<User[]>(queryClient, { queryKey: [key] })

    const unsubscribe = observer.subscribe(result => {
        if (result.data) setUsers(result.data)
    })

}, [])

Recuerda que una buena practica es cancelar la suscripción cuando el componente se desmonte.

useEffect(() => {
    const observer = new QueryObserver<User[]>(queryClient, { queryKey: [key] })

    const unsubscribe = observer.subscribe(result => {
        if (result.data) setUsers(result.data)
    })

    return () => {
        unsubscribe()
    }
}, [])

Y asi quedaría este nuevo custom hook.


export const useGetUsersObserver = () => {

    const get_users = useGetUsers()

    const queryClient = useQueryClient()

    const [users, setUsers] = useState<User[]>(() => {

        const data = queryClient.getQueryData<User[]>([key])
        return data ?? []
    })


    useEffect(() => {
        const observer = new QueryObserver<User[]>(queryClient, { queryKey: [key] })

        const unsubscribe = observer.subscribe(result => {
            if (result.data) setUsers(result.data)
        })

        return () => {
            unsubscribe()
        }
    }, [])

    return {
        ...get_users,
        data: users,
    }
}

Ahora solo es cuestión de usarlo en el componente donde queremos estar al pendiente de estos datos. Como en el componente ViewUser.

No olvides importar useGetUsersObserver

export const ViewUser = ({ id }: Pick<User, 'id'>) => {

    // const get_users = useGetUsers()
    const get_users = useGetUsersObserver()

    const user_selected = get_users.data?.find(user => user.id === +id)

    if (!user_selected) return null

    return (
        <>
            <h1>Edit user: {id}</h1>
            <span>User name: <b>{user_selected?.name}</b></span>
        </>
    )
}

Ahora si cuando intentes actualizar los datos o eliminarlo, veras como el componente ViewUser también se actualizara una vez la petición sea realizada de manera exitosa.

Y con esto terminaríamos el CRUD usando como gestor de estado la cache de React Query.

📢 Conclusión.

React Query es una librería muy potente que sin duda nos ayuda con el manejo de las peticiones. Pero ahora puedes extenderte mucho mas sabiendo que puedes utilizarlo como un gestor de estado, probablemente una alternativa más.

Espero que te haya gustado esta publicación y que también espero haberte ayudado a extender mas tus conocimientos con React Query.

Si conoces alguna otra forma distinta o mejor de como gestionar el estado usando React Query, con gusto puedes hacerla saber en los comentarios.

Te invito a que revises mi portafolio en caso de que estés interesado en contactarme para algún proyecto! Franklin Martinez Lucas

🔵 No olvides seguirme también en twitter: @Frankomtz361

📢 Demostración simple.

https://rq-state-management.netlify.app/

📢 Código fuente.

https://github.com/Franklin361/state-management-react-query

Managing state with React Query. 〽️

Franklin Martinez — Fri, 17 Mar 2023 15:17:00 +0000

React Query is a large and complete library that facilitates the work when making client-side requests to the server and even performs much more than that.

But Did you know that you can use this library as a state manager?, possibly an alternative to redux-toolkit, zustand, among others. In this article I will show you how to implement it this way.

🚨 Note: to understand this article you should have basic knowledge of how to use React Query and also some basic knowledge with TypeScript.

Table of contents.

📌 Technologies to be used.

📌 Creating the project.

📌 First steps.

📌 Creating the pages.

📌 Configuring React Query.

📌 Using React Query as status manager.

📌 Creating the functions to make the requests.

📌 Getting the data with React Query.

📌 Adding new data to our state.

📌 Removing data from the state.

📌 Updating the status data.

📌 Conclusion.

📌 Demonstration.

📌 Source code.

📢 Technologies to be used.

React JS 18.2.0
React Query 4.20.4
React Router Dom 6.6.1
TypeScript 4.9.3
Vite JS 4.0.0
CSS vanilla (You can find the styles in the repository at the end of this post)

📢 Creating the project.

We will name the project: state-management-rq (optional, you can name it whatever you like).

npm create vite@latest

We create the project with Vite JS and select React with TypeScript.

Then we run the following command to navigate to the directory just created.

cd state-management-rq

Then we install the dependencies.

npm install

Then we open the project in a code editor (in my case VS code).

code .

📢 First steps.

First we are going to install a dom router to be able to create a couple of pages in our app.

npm install react-router-dom

So, let's create a src/layout folder to create a very simple navigation menu that will be on all the pages.
Inside src/layout we create the index.tsx file and add the following:

import { NavLink, Outlet } from 'react-router-dom'

type LinkActive = { isActive: boolean }

const isActiveLink = ({ isActive }: LinkActive) => `link ${isActive ? 'active' : ''}`

export const Layout = () => {
    return (
        <>
            <nav>
                <NavLink className={isActiveLink} to="/">Home 🏠</NavLink>
                <NavLink className={isActiveLink} to="/create">Create ✍️</NavLink>
            </nav>

            <hr className='divider' />

            <div className='container'>
                <Outlet />
            </div>
        </>
    )
}

Then in the src/App.tsx file we are going to delete everything. And we are going to create our basic routes.

Note: We are going to set the routes using createBrowserRouter, but if you want you can use the components that react-router-dom still has like <BrowserRouter/>, <Routes/>, <Route/>, etc. instead of createBrowserRouter.

By createBrowserRouter we are going to create an object where we will add our routes. Note that I only have a parent route, and what I show is the navigation menu, and this route has 3 daughter routes, which for the moment have not been created their pages.

Finally we create the component App that we export by default, this component is going to render a component of react-router-dom that is the <RouterProvider/> that receives the router that we have just created.

And with this we can navigate between the different routes.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Layout } from './layout';
import { Home } from './pages/home';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <>create</>,
      },
      {
        path: "/create",
        element: <>create</>,
      },
      {
        path: "/:id",
        element: <>edit</>,
      },
    ]
  }
]);

const App = () => ( <RouterProvider router={router} /> )

export default App

Then we will come back to this file to add more stuff 👀.

📢 Creating the pages.

Now we are going to create the three pages for the paths we defined earlier.
Create a new folder src/pages and inside create 3 files.

home.tsx

In this file we are only going to list the data that will come from the API, so for the moment we will only put the following:

import { Link } from 'react-router-dom'

export const Home = () => {
    return (
        <>
            <h1>Home</h1>

            <div className="grid">
                <Link to={`/1`} className='user'>
                    <span>username</span>
                </Link>
            </div>
        </>
    )
}

createUser.tsx.

This page is only for creating new users or new data. So we will create a form. In this occasion I am not going to use a state to control the input of the form, but simply I will use the event that emits the form when it executes the onSubmit of the same one (It is important to put the attribute name to the input).

export const CreateUser = () => {

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        const form = e.target as HTMLFormElement
        const data = Object.fromEntries(new FormData(form))

        // TODO: create new user

        form.reset()
    }

    return (
        <div>
            <h1>Create User</h1>
            <form onSubmit={handleSubmit} className='mt'>
                <input name='user' type="text" placeholder='Add new user' />

                <button>Add User</button>
            </form>
        </div>
    )
}

editUser.tsx

In this page the selected user will be edited, we will obtain his ID by means of the parameters of the URL, as we established it when we created the router.

import { useParams } from 'react-router-dom';

export const EditUser = () => {
    const params = useParams()

    const { id } = params

    if (!id) return null

    return (
        <>
            <span>Edit user {id}</span>
        </>
    )
}

Now we need to place these pages in the router!

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Layout } from './layout';
import { CreateUser } from './pages/createUser';
import { EditUser } from './pages/editUser';
import { Home } from './pages/home';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "/create",
        element: <CreateUser />,
      },
      {
        path: "/:id",
        element: <EditUser />,
      },
    ]
  }
]);

const App = () => (
    <RouterProvider router={router} />
)

export default App

📢 Configuring React Query.

First we will install the library.

npm install @tanstack/react-query

Then we configure the provider in the src/App.tsx file.

First we will create the queryClient.

For this occasion we are going to leave these options, that will help us to use React Query also as a state manager:

refetchOnWindowFocus: When you exit your app and then come back React Query returns to make the request for the data.
refetchOnMount: When the component is remounted then it will make the request again.
retry: Number of times to retry the request.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      retry: 1,
    },
  },
});

Then we need to import the provider that offers us React Query and send it the queryClient we just created.

const App = () => (
  <QueryClientProvider client={queryClient}>
    <RouterProvider router={router} />
  </QueryClientProvider>
)

And finally, although it is optional, but it is very very useful, we will install the React Query devtools, which will help a lot.

npm install @tanstack/react-query-devtools

Now we place the devtools inside the React Query provider.

The file would finally look like this.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Layout } from './layout';
import { CreateUser } from './pages/createUser';
import { EditUser } from './pages/editUser';
import { Home } from './pages/home';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "/create",
        element: <CreateUser />,
      },
      {
        path: "/:id",
        element: <EditUser />,
      },
    ]
  }
]);

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      retry: 1
    },
  },
});

const App = () => (
  <QueryClientProvider client={queryClient}>
    <ReactQueryDevtools initialIsOpen={false} />
    <RouterProvider router={router} />
  </QueryClientProvider>
)

export default App

📢 Using React Query as status manager.

First we will create the queryFn that we will execute.

📢 Creating the functions to make the requests.

We are going to create a folder src/api, and we will create the file user.ts, here we will have the functions to make the requests, to the API.
In order not to take more time to create an API, we will use JSON place holder because it will allow us to make a "CRUD" and not only GET requests.

**We will create 4 functions to do the CRUD.

First we set the constants and the interface

The interface is as follows:

export interface User {
    id: number;
    name: string;
}

And the constants are:

import { User } from '../interface';

const URL_BASE = 'https://jsonplaceholder.typicode.com/users'
const headers = { 'Content-type': 'application/json' }

First we will make a function to request the users. this function must return a promise.

export const getUsers = async (): Promise<User[]> => {
    return await (await fetch(URL_BASE)).json()
}

Then the function to create a new user, which receives a user and returns a promise that resolves the new user.

export const createUser = async (user: Omit<User, 'id'>): Promise<User> => {
    const body = JSON.stringify(user)
    const method = 'POST'
    return await (await fetch(URL_BASE, { body, method, headers })).json()
}

Another function to edit a user, which receives the user to edit and returns a promise that resolves the edited user.

export const editUser = async (user: User): Promise<User> => {
    const body = JSON.stringify(user)
    const method = 'PUT'
    return await (await fetch(`${URL_BASE}/${user.id}`, { body, method, headers })).json()
}

Finally, a function to delete the user, which receives an id. And since when deleting a record from the API, it does not return anything, then we will return a promise that resolves the id to identify which user was deleted.

export const deleteUser = async (id: number): Promise<number> => {
    const method = 'DELETE'
    await fetch(`${URL_BASE}/${id}`, { method })
    return id
}

This is how this file would look like:

import { User } from '../interface';

const URL_BASE = 'https://jsonplaceholder.typicode.com/users'
const headers = { 'Content-type': 'application/json' }

export const getUsers = async (): Promise<User[]> => {
    return await (await fetch(URL_BASE)).json()
}

export const createUser = async (user: Omit<User, 'id'>): Promise<User> => {
    const body = JSON.stringify(user)
    const method = 'POST'
    return await (await fetch(URL_BASE, { body, method, headers })).json()
}

export const editUser = async (user: User): Promise<User> => {
    const body = JSON.stringify(user)
    const method = 'PUT'
    return await (await fetch(`${URL_BASE}/${user.id}`, { body, method, headers })).json()
}

export const deleteUser = async (id: number): Promise<number> => {
    const method = 'DELETE'
    await fetch(`${URL_BASE}/${id}`, { method })
    return id
}

📢 Getting the data with React Query.

Instead of placing the React Query code directly in the component, we will place them all at once in a custom hook to have our code centralized in one place.

So we will create a folder src/hook and inside a file called useUser.tsx.

The first custom hook we will create will be useGetUsers which only returns the properties returned by the useQuery hook.

Note that useQuery, needs 2 parameters, an array of strings to identify the query, and the second parameter is the function that we have done previously which is to get the users from the API.

import { useQuery } from '@tanstack/react-query';
import { getUsers } from '../api/user';

const key = 'users'

export const useGetUsers = () => {
    return useQuery([key], getUsers);
}

Ahora, toca usar useGetUsers. Como notaras, es lo mismo que si usamos useQuery, pero sin necesitar establecer la queryKey y la queryFn, asiéndolo mas fácil de leer

import { Link } from 'react-router-dom'
import { useGetUsers } from '../hook/useUser'

export const Home = () => {

    const { data, isLoading, isError } = useGetUsers()

    return (
        <>
            <h1>Home</h1>

            {isLoading && <span>fetching a character...</span>}
            {isError && <span>Ups! it was an error 🚨</span>}

            <div className="grid">
                {
                    data?.map(user => (
                        <Link to={`/${user.id}`} key={user.id} className='user'>
                            <span>{user.name}</span>
                        </Link>
                    ))
                }
            </div>
        </>
    )
}

So far, we have only set the data and stored this data in the cache (which will act as our store that stores the state), we have not yet used/modified the state of this component elsewhere.

📢 Adding new data to our state.

Let's go to src/hooks/useUser.tsx and create a new custom hook to create new users.

export const useCreateUser = () => {}

In this occasion and in the following ones, we will use useMutation because we are going to execute a POST request to create a new record.

useMutation receives the queryFn to execute, in this case we will pass it the function we created to add a new user.

export const useCreateUser = () => {
    return useMutation(createUser)
}

We will pass a second parameter which will be an object, which will access the onSuccess property which is a function that is executed when the request is successful.

onSuccess receives several parameters, and we will use the first one which is the data returned by the createUser function which in this case must be the new user.

export const useCreateUser = () => {

return useMutation(createUser, {
        onSuccess: (user: User) => {}
    })
}

Now what we want to do is to access the cache (our state) and add this newly created user.

For this task we will use another React Query hook, useQueryClient.

🚨 Note: Do not destructure any property of the hook useQueryClient because you will lose the reference and this property will not work as you want.

Now, inside the body of the onSuccess function, let's set the new data, using the setQueryData property.

setQueryData, needs 2 parameters, the first one is the queryKey to identify which part of the cache you are going to get the data and modify it.

export const useCreateUser = () => {
    const queryClient = useQueryClient();

    return useMutation(createUser, {
        onSuccess: (user: User) => {
            queryClient.setQueryData([key])
        }
    })
}

The second parameter is the function to set the new data. Which must receive by parameter, the data that is already in the cache, which in this case can be an array of users or undefined.

What will be done, will be a validation, where if there are already users in the cache, we only add the new user and spread the previous users, otherwise we only return the user created in an array.

export const useCreateUser = () => {
    const queryClient = useQueryClient();

    return useMutation(createUser, {
        onSuccess: (user: User) => {

            queryClient.setQueryData([key],
                (prevUsers: User[] | undefined) => prevUsers ? [user, ...prevUsers] : [user]
            )

            // queryClient.invalidateQueries([key])
        }
    })
}

🚨 Note: Observe the line commented in the previous code
queryClient.invalidateQueries([key])
This line of code is used to invalidate the cache and re-request the data from the server. This is what you normally want to do when you make some kind of POST, PUT, DELETE, etc. request..

In my case, I comment this line, because the JSON placeholder API does not modify the data, it only simulates it. So if I make a DELETE request to delete a record and everything goes well and then I put invalidateQueries, it will return all the users again and it will seem that there was no change in the data.

Once this is clear, we will use the custom hook in src/pages/createUser.tsx.

We set the custom hook, in this case, you can unstructure the props returned by this hook but I won't do it just for fun (although when we use more than one hook, this syntax will be a good option to avoid conflict with the names of the props).

    const create_user = useCreateUser()

Now in the handleSubmit, we will access the mutateAsync property, and thanks to TypeScript we know what arguments we must pass, which is the name of the new user.

await create_user.mutateAsync({ name: data.user as string  })

If you wonder where we get this argument, it is from the function, it is from the createUser function of the file src/>api/user.ts, it depends on what it receives as parameter, it is what we will send as argument.

And the page would look like this:

import { useCreateUser } from '../hook/useUser'

export const CreateUser = () => {

    const create_user = useCreateUser()

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        const form = e.target as HTMLFormElement
        const data = Object.fromEntries(new FormData(form))

        await create_user.mutateAsync({ name: data.user as string })

        form.reset()
    }

    return (
        <div>
            <h1>Create User</h1>
            <form onSubmit={handleSubmit} className='mt'>
                <input name='user' type="text" placeholder='Add new user' />
                {create_user.isLoading && <span>creating user...</span>}
                <button>Add User</button>
                {create_user.isSuccess && <span>User created successfully ✅</span>}
                {create_user.isError && <span>Ups! it was an error 🚨</span>}
            </form>
        </div>
    )
}

📢 Removing data from the state.

Now it is time to delete data, and the steps are similar to when we create data.

We create the custom hook, useDeleteUser.
We use useMutation, sending the function to execute, deleteUser.
We access to the onSuccess property, to execute the function.
We use use useQueryClient to modify the data in the cache, once the request is successful.
We send the queryKey to the setQueryData property, and the function, we validate if there is data, if yes, we filter the data by the ID we received from the onSuccess and exclude the user we just deleted, returning the new array without the deleted user.

export const useDeleteUser = () => {

    const queryClient = useQueryClient();

    return useMutation(deleteUser, {
        onSuccess: (id) => {
            queryClient.setQueryData([key],
                (prevUsers: User[] | undefined) => prevUsers ? prevUsers.filter(user => user.id !== id) : prevUsers
                // queryClient.invalidateQueries([key])
            )
        }
    });
}

We use our custom hook in src/pages/editUser.tsx.

But before we are going to separate in different components the actions to be performed. First we will create a component in the same file, we will name it DeleteUser which receives the id of the user to delete.

import { useParams } from 'react-router-dom';
import { useDeleteUser } from '../hook/useUser';
import { User } from '../interface';

export const EditUser = () => {
    const params = useParams()

    const { id } = params

    if (!id) return null

    return (
        <>
            <DeleteUser id={+id} />
        </>
    )
}

DeleteUser will have the following.

We set the custom hook useDeleteUser and access the mutateAsync method to execute the request and send it the id.

export const DeleteUser = ({ id }: Pick<User, 'id'>) => {
    const delete_user = useDeleteUser()

    const onDelete = async () => {
        await delete_user.mutateAsync(id)
    }

    return (
        <>
            {delete_user.isLoading && <span>deleting user...</span>}

            <button onClick={onDelete}>Delete User</button>

            {delete_user.isSuccess && <span>User deleted successfully ✅, go back home</span>}
            {delete_user.isError && <span>Ups! it was an error 🚨</span>}
        </>
    )
}

And that's it, once removed, go back to the Home page and you will notice that the user has been removed correctly. Of course, if you refresh the browser, this user reappears because we are using JSON placeholder.

📢 Updating the status data.

Now it is time to update a user following the same steps.

We create the custom hook, useEditUser.
We use useMutation, sending the function to execute, editUser.
We access to the onSuccess property, to execute the function.
We use use useQueryClient to modify the data in the cache, once the request is successful.
We send the queryKey to the setQueryData property, and the function, we validate if data exists, if yes, we identify the user that was modified through the ID and we assign its new value already modified.

export const useEditUser = () => {
    const queryClient = useQueryClient();

    return useMutation(editUser, {
        onSuccess: (user_updated: User) => {

            queryClient.setQueryData([key],
                (prevUsers: User[] | undefined) => {
                    if (prevUsers) {
                        prevUsers.map(user => {
                            if (user.id === user_updated.id) {
                                user.name = user_updated.name
                            }
                            return user
                        })
                    }
                    return prevUsers
                }
            )
        }
    })
}

Now let's go to src/pages/editUser.tsx and create 2 more components to show you a drawback.
We create the components ViewUser to see the user and EditUser which will be a form to edit the user.

import { useParams } from 'react-router-dom';
import { useDeleteUser, useEditUser, useGetUsers } from '../hook/useUser';
import { User } from '../interface';

export const EditUser = () => {
    const params = useParams()

    const { id } = params

    if (!id) return null

    return (
        <>
            <ViewUser id={+id} />
            <EditUserForm id={+id} />
            <DeleteUser id={+id} />
        </>
    )
}

ViewUser receives the id, and makes use of useGetUsers to fetch all users (which does not trigger another request, but accesses those in the cache).
We filter the user and display it on screen.

export const ViewUser = ({ id }: Pick<User, 'id'>) => {

    const get_users = useGetUsers()

    const user_selected = get_users.data?.find(user => user.id === +id)

    if (!user_selected) return null

    return (
        <>
            <h1>Edit user: {id}</h1>
            <span>User name: <b>{user_selected?.name}</b></span>
        </>
    )
}

EditUser, it also receives an ID. In fact this component is quite the same as the one in the createUser.tsx page, you can even reuse it, but in my case I won't do it.

We use the custom hook useEditUser, we access to its method mutateAsync and we pass the necessary arguments. And ready you will be able to edit the selected user.


export const EditUserForm = ({ id }: Pick<User, 'id'>) => {

    const edit_user = useEditUser()

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        const form = e.target as HTMLFormElement
        const data = Object.fromEntries(new FormData(form))
        await edit_user.mutateAsync({ name: data.user as string, id })
        form.reset()
    }

    return (
        <>
            <form onSubmit={handleSubmit}>
                <input name='user' type="text" placeholder='Update this user' />
                {edit_user.isLoading && <span>updating user...</span>}
                <button>Update User</button>
                {edit_user.isSuccess && <span>User updated successfully ✅</span>}
                {edit_user.isError && <span>Ups! it was an error 🚨</span>}
            </form>
        </>
    )
}

But be careful, you will notice that when a user is updated correctly, the ViewUser component is not rendered, that is, it keeps the value of the previous user's name. But if you go back to the Home page, you will notice that the user's name is updated.

This is because a new rendering is needed to change the ViewUser component.

For this I can think of a solution. Create a new custom hook that handles an observable and be aware of the changes in a certain part of the cache.

In this custom hook we are going to use the other custom hook useGetUsers and the hook useQueryClient.

First we use the useGetUsers and return its props, but we overwrite the prop data, since it is the one that we have to be aware of changes.

export const useGetUsersObserver = () => {

    const get_users = useGetUsers()

    return {
      ...get_users,
        data:[],
    }
}

We create a state to manage the user array, and we assign that state to the prop data.

export const useGetUsersObserver = () => {

    const get_users = useGetUsers()

    const [users, setUsers] = useState<User[]>()

    return {
        ...get_users,
        data: users,
    }
}

We initialize the state with the existing data in the cache, in case there is no data in the cache we return an empty array. This is achieved using the hook useQueryClient and its property getQueryData.

export const useGetUsersObserver = () => {

    const get_users = useGetUsers()

    const queryClient = useQueryClient()

    const [users, setUsers] = useState<User[]>(() => {

        const data = queryClient.getQueryData<User[]>([key])
        return data ?? []
    })

    return {
        ...get_users,
        data: users,
    }
}

Now we will use an effect to handle the observer. Inside we create a new instance of QueryObserver that requires two arguments, the queryClient and an object where it needs the queyKey to know which part of the cache will be watched.

useEffect(() => {
    const observer = new QueryObserver<User[]>(queryClient, { queryKey: [key] })

}, [])

Now we need to subscribe to the observer, so we execute the subscribe property of the observer. The subscribe receives a callback which returns an object that is basically the same properties that returns a hook like useQuery so we validate if in the data property there is data, then we update the state with this new data.

useEffect(() => {
    const observer = new QueryObserver<User[]>(queryClient, { queryKey: [key] })

    const unsubscribe = observer.subscribe(result => {
        if (result.data) setUsers(result.data)
    })

}, [])

Remember that a good practice is to cancel the subscription when the component is disassembled.

useEffect(() => {
    const observer = new QueryObserver<User[]>(queryClient, { queryKey: [key] })

    const unsubscribe = observer.subscribe(result => {
        if (result.data) setUsers(result.data)
    })

    return () => {
        unsubscribe()
    }
}, [])

And this is how this new custom hook would look like.


export const useGetUsersObserver = () => {

    const get_users = useGetUsers()

    const queryClient = useQueryClient()

    const [users, setUsers] = useState<User[]>(() => {

        const data = queryClient.getQueryData<User[]>([key])
        return data ?? []
    })


    useEffect(() => {
        const observer = new QueryObserver<User[]>(queryClient, { queryKey: [key] })

        const unsubscribe = observer.subscribe(result => {
            if (result.data) setUsers(result.data)
        })

        return () => {
            unsubscribe()
        }
    }, [])

    return {
        ...get_users,
        data: users,
    }
}

Now it is only a question of using it in the component where we want to be aware of this data. As in the ViewUser component.

Don't forget to import useGetUsersObserver.

export const ViewUser = ({ id }: Pick<User, 'id'>) => {

    // const get_users = useGetUsers()
    const get_users = useGetUsersObserver()

    const user_selected = get_users.data?.find(user => user.id === +id)

    if (!user_selected) return null

    return (
        <>
            <h1>Edit user: {id}</h1>
            <span>User name: <b>{user_selected?.name}</b></span>
        </>
    )
}

Now if when you try to update the data or delete it, you will see how the ViewUser component will also be updated once the request is successful.

And with this we would finish the CRUD using as state manager the React Query cache.

📢 Conclusion.

React Query is a very powerful library that certainly helps us with request handling. But now you can extend it much more knowing that you can use it as a status manager, probably one more alternative.

I hope you liked this post and I also hope I helped you to extend your knowledge with React Query.

If you know any other different or better way on how to manage status using React Query, feel free to let me know in the comments.

I invite you to check my portfolio in case you are interested in contacting me for a project!. Franklin Martinez Lucas

🔵 Don't forget to follow me also on twitter: @Frankomtz361

📢 Demo.

https://rq-state-management.netlify.app/

📢 Source code.

https://github.com/Franklin361/state-management-react-query

Formularios dinámicos con React Hook Form. 📝

Franklin Martinez — Fri, 10 Mar 2023 13:46:53 +0000

En esta ocasión, volveremos a crear formularios dinámicos pero ahora con ayuda de la librería de react-hook-form.

Nota 📣: Necesitas tener conocimiento en Typescript para seguir este tutorial, así como de React JS.

Tal vez te interese este articulo, donde también hacemos lo mismo que en este post, pero usando la librería de Formik. 😉

Formularios dinámicos con Formik y React JS. 📝

Franklin Martinez ・ Oct 28 '22

#react #javascript #spanish #tutorial

Tabla de contenido.

📌 Tecnologías a utilizar.

📌 Creando el proyecto.

📌 Primeros pasos.

📌 Creando el objeto de formulario.

📌 Creando el tipado para los inputs.

📌 Ahora si, creamos el objeto de formulario con ayuda del tipado.

📌 Creando el esquema de validaciones para nuestro formulario.

📌 Función para generar los inputs.

📌 Creando el componente de formulario.

📌 Creando los componentes de cada input.

📌 Usando nuestro componente Form.

📌 Conclusión.

📌 Demostración.

📌 Código fuente.

💊 Tecnologías a utilizar.

React JS 18.2.0
TypeScript 4.9.3
React Hook Form 7.43.0
Vite JS 4.1.0
Tailwind CSS 3.2.4 (no se muestra el proceso de instalación ni de configuración)

💊 Creando el proyecto.

Al proyecto le colocaremos el nombre de: dynamic-forms-rhf (opcional, tu le puedes poner el nombre que gustes).



npm create vite@latest

Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.



cd dynamic-forms-rhf

Luego instalamos las dependencias.



npm install

Después abrimos el proyecto en un editor de código (en mi caso VS code).



code .

💊 Primeros pasos.

Dentro del archivo src/App.tsx borramos todo y creamos un componente que muestre un hola mundo



const App = () => {
  return <div>Hello world</div>;
};
export default App;

🚨 Nota: Cada vez que creamos una nueva carpeta, también crearemos un archivo index.ts para agrupar y exportar todas las funciones y componentes de otros archivos que están dentro de la misma carpeta, y que dichas funciones puedan ser importadas a traves de una sola referencia a esto se le conoce como archivo barril.

Vamos a crear un layout, creamos una carpeta src/components y dentro creamos un archivo Layout.tsx.



export const Layout = ({ children }: { children: JSX.Element | JSX.Element[] }) => {
    return (
        <>
            <h1 className='text-center my-10 text-5xl'>
                <span>Dynamic Form</span>
                <span className='font-bold bg-clip-text text-transparent  text-[#EC5990]'>
                    {' - '}
                    React Hook Form
                </span>
            </h1>

            <main className='grid sm:grid-cols-2 grid-cols-1 sm:mb-0 mb-10 gap-10 place-items-start justify-items-center px-5'>
                {children}
            </main>
        </>
    )
}

Ahora, dentro de archivo src/App.tsx, agregamos el layout.



import { Layout } from './components'

const App = () => {

    return (
        <Layout>
            <span>Form</span>
        </Layout>
    )
}
export default App

Luego vamos a instalar los paquetes necesarios.

react-hook-form, para manejar los formularios de una manera mas fácil.
yup, para manejar validaciones en los formularios.
@hookform/resolvers, para integrar yup con react-hook form.



npm install -E react-hook-form @hookform/resolvers yup

Anteriormente ya había realizado este mismo ejercicio de formularios dinámicos pero usando la librería de Formik, y la verdad es muy similar lo que vamos a realizar, lo único que cambiar son los componentes como el formulario e inputs.

💊 Creando el objeto de formulario.

💊 Creando el tipado para los inputs.

Antes, vamos a crear el tipado. Creamos una nueva carpeta src/types y creamos el archivo index.ts.

Ahora primero creamos la interfaz para los inputs, el cual puede incluso tener más propiedades, pero estas son suficientes para hacer este ejemplo.

Lo mas destacado son las ultimas tres propiedades de la interfaz InputProps:

typeValue: necesaria ya que necesitamos indicarle a Yup que tipo de valor acepta el input.
validations: validaciones que se le establecerán a Yup en base al input; solo coloque validaciones básicas, aunque puedes integrar más si buscas en la documentación de Yup.
- La validación que tal vez se mas se te complique puede ser oneOf, si no haz usado Yup. Esta validación, necesita de una referencia o sea el name de otro input para validar si ambos input contienen el mismo contenido. Un ejemplo de donde usar esta validación es en un input donde creas un password y otro donde tienes que repetir password y ambos valores tienen que coincidir.
options: esta propiedad es necesario solo si el input es un select o un grupo de inputs de tipo radio



export interface InputProps {
    type: 'text' | 'radio' | 'email' | 'password' | 'select' | 'checkbox'
    name: string
    value: string | number | boolean
    placeholder?: string
    label?: string

    typeValue?:  'boolean' | 'number'
    validations?: Validation[]
    options?: Opt[]
}

export interface Opt {
    value: string | number
    desc: string
}

export interface Validation {
    type: 'required' | 'isEmail' | 'minLength' | 'isTrue' | 'oneOf'
    value?: string | number | boolean
    message: string
    ref?: string
}

También de una vez creamos este tipo para los tipos de formularios que vamos a desarrollar.
En este caso solo vamos a crear dos formularios.



export type FormSection = 'register' | 'another'

💊 Ahora si, creamos el objeto de formulario con ayuda del tipado.

Gracias a Typescript podemos crear nuestros formularios en este objeto.
Creamos una nueva carpeta src/lib y dentro creamos el archivo form.ts y agregamos lo siguiente:



import { FormSection, InputProps } from '../types';

export const forms: { [K in FormSection]: InputProps[] } =
{

    register: [
        {
            label: "New username",
            type: "text",
            name: "username",
            placeholder: "New username",
            value: "",
            validations: [
                {
                    type: "minLength",
                    value: 3,
                    message: "Min. 3 characters",
                },
                {
                    type: "required",
                    message: "Username is required"
                },
            ],

        },
        {
            label: "New Password",
            type: "password",
            name: "password",
            placeholder: "New password",
            value: "",
            validations: [
                {
                    type: "required",
                    message: "Password is required"
                },
                {
                    type: "minLength",
                    value: 5,
                    message: "Min. 5 characters",
                }
            ],

        },
        {
            label: 'Repeat your password',
            type: "password",
            name: "repeat_password",
            placeholder: "Repeat password",
            value: "",
            validations: [
                {
                    type: "required",
                    message: "Repeat password is required"
                },
                {
                    type: "minLength",
                    value: 5,
                    message: "Min. 5 characters",
                },
                {
                    type: 'oneOf',
                    message: 'Passwords must match',
                    ref: 'password'
                }
            ],

        },

    ],

    another: [

        {
            label: "E-mail address",
            type: "email",
            name: "email",
            placeholder: "correo@correo.com",
            value: "",
            validations: [
                {
                    type: "required",
                    message: "Email is required"
                },
                {
                    type: "isEmail",
                    message: "Email no valid"
                }
            ],

        },
        {
            type: "select",
            name: "rol",
            label: "Select an option: ",
            value: "",
            options: [
                {
                    value: "admin",
                    desc: "Admin",
                },
                {
                    value: "user",
                    desc: "User"
                },
                {
                    value: "super-admin",
                    desc: "Super Admin"
                }
            ],
            validations: [
                {
                    type: "required",
                    message: "Rol is required"
                }
            ]
        },
        {
            type: "radio",
            name: "gender",
            label: "Gender: ",
            value: "",
            options: [
                {
                    value: 'man',
                    desc: "Man"
                },
                {

                    value: "woman",
                    desc: "Woman"
                },
                {

                    value: "other",
                    desc: "Other"
                },
            ],
            validations: [
                {
                    type: "required",
                    message: "Gender is required"
                }
            ]
        },
        {
            type: "checkbox",
            name: "terms",
            typeValue: "boolean",
            label: "Terms and Conditions",
            value: false,
            validations: [
                {
                    type: "isTrue",
                    message: "Accept the terms!"
                }
            ]
        },
    ]
}

💊 Creando el esquema de validaciones para nuestro formulario.

Vamos a crear un nuevo archivo en src/lib y lo nombramos getInputs.ts
Creamos una nueva función para generar las validaciones a cada input.
Esta función recibe los campos, y cada campo es de tipo InputProps. También vamos a crear 2 tipos solamente para que Typescript no nos moleste mas adelante.

Nota que creamos los tipos YupBoolean y YupString. Si quieres puedes agregar otros tipos ya sea para manejar algún otro tipo de dato como el numérico o el arreglo. Por ejemplo:
  type YupNumber = Yup.NumberSchema<boolean | undefined, AnyObject, number | undefined>
Yo no lo agrego, porque en mis interfaces no manejo alguna validación de tipo numero o arreglo.



import * as Yup from "yup";
import { AnyObject } from "yup/lib/types";
import { FormSection, InputProps } from '../types';
import { forms } from '../lib';

type YupBoolean = Yup.BooleanSchema<boolean | undefined, AnyObject, boolean | undefined>
type YupString = Yup.StringSchema<string | undefined, AnyObject, string | undefined>

const generateValidations = (field: InputProps) => {}

Primero creamos una variable que se inicializara con el tipo de dato que manejara nuestro input. El tipo de dato lo obtenemos de la propiedad typeValue, en caso de que sea undefined por defecto el tipo de dat sera string, y entonces ejecutamos la función



let schema = Yup[field.typeValue || 'string']()

Luego vamos a recorrer las validaciones del campo, ya que es un arreglo.

Dentro del ciclo, usaremos un switch case, evaluando que tipo de regla es la que tiene dicho campo.



const generateValidations = (field: InputProps) => {

    let schema = Yup[field.typeValue || 'string']()

    for (const rule of field.validations) {

        switch (rule.type) { }
    }
}

En cada caso del switch vamos a sobrescribir la variable schema. De la siguiente manera:

Si tiene una validación 'isTrue' significa que el input maneja valores booleanos, por lo cual queremos que nuestro schema se comporte como un YupBoolean, ya que si no Typescript se estaría quejando. Luego ejecutamos la función que tenga que ver con cada caso.

Por ejemplo, en el caso de 'isTrue', ejecutamos la función que se llama exactamente igual, y dentro le pasamos el mensaje



case 'isTrue'   : schema = (schema as YupBoolean).isTrue(rule.message);  break;

En el caso de que la validación sea oneOf, necesitamos enviarle, como primer parámetro un arreglo y como segundo parámetro un mensaje.

En el caso del arreglo, debe ser el valor con el que quieres que coincida, pero en este caso queremos que coincida con el valor de otro campo, por eso usamos Yup.ref el cual necesita un string que hace referencia al atributo name de un input.
Para que asi cuando se haga la validación, se verifique si ambos campos contienen el mismo valor.



case 'oneOf'    : schema = (schema as YupString)
                                            .oneOf(
                                                    [ Yup.ref(rule.ref as string) ], 
                                                    rule.message
                                                  ); 
break;

Asi quedaría nuestra primera función. Al final retornamos la variable schema.
Nota que al inicio de la función, colocamos una condición donde si el campo no tiene validaciones entonces retornar null y evitar ejecutar el ciclo.



import * as Yup from "yup";
import { AnyObject } from "yup/lib/types";
import { FormSection, InputProps } from '../types';
import { forms } from '../lib';

type YupBoolean = Yup.BooleanSchema<boolean | undefined, AnyObject, boolean | undefined>
type YupString = Yup.StringSchema<string | undefined, AnyObject, string | undefined>

const generateValidations = (field: InputProps) => {

    if (!field.validations) return null

    let schema = Yup[field.typeValue || 'string']()

    for (const rule of field.validations) {
        switch (rule.type) {
            case 'isTrue'   : schema = (schema as YupBoolean).isTrue(rule.message);  break;
            case 'isEmail'  : schema = (schema as YupString).email(rule.message);  break;
            case 'minLength': schema = (schema as YupString).min(rule?.value as number, rule.message);  break;
            case 'oneOf'    : schema = (schema as YupString).oneOf([Yup.ref((rule as any).ref)], rule.message);  break;
            default         : schema = schema.required(rule.message);  break;
        }
    }

    return schema
}

💊 Función para generar los inputs.

Primero vamos a crear un función y la nombramos getInputs, la cual es de tipo genérico y recibe como parámetro la section (o sea que formulario quieres obtener sus campos, en este caso puede ser el formulario de signUp o el otro).

Vamos a crear dos variables que las inicializaremos como objetos vacíos y que al final deberán contener nuevas propiedades.




export const getInputs = <T>(section: FormSection) => {

    let initialValues: { [key: string]: any } = {};

    let validationsFields: { [key: string]: any } = {};

};

Dentro de la función haremos un ciclo for of. En el caul vamos a recorrer los campos de un formulario en especifico.

Dentro del ciclo, vamos a computar los valores en la variable de initialValues, y para computar los valores usamos la propiedad name del campo.
Verificamos si existen validaciones para el campo.
- Si no hay validaciones, entonces seguir con el siguiente campo.
- Si hat validaciones, ejecutamos la función que creamos anteriormente generateValidations mandando el campo como argumento.
Luego a la variable validationsFields, también le computamos los valores usando la propiedad name del campo, y le asignamos el schema de validación que se ha generado.



for (const field of forms[section]) {

    initialValues[field.name] = field.value;

    if (!field.validations) continue;

    const schema = generateValidations(field)

    validationsFields[field.name] = schema;
}

Una vez terminado el ciclo, debemos retornar 3 propiedades.

El esquema de validación dentro de un Yup.object, esparciendo las propiedades de validationsFields. ```tsx

validationSchema: Yup.object({ ...validationsFields }),

- Los valores iniciales, y haremos que se comporten como genérico para poder usarlos después
```tsx


initialValues: initialValues as T,

- Los campos que queremos mostrar en nuestro formulario.



inputs: forms[section]

Asi se vería al final nuestra función




export const getInputs = <T>(section: FormSection) => {

    let initialValues: { [key: string]: any } = {};

    let validationsFields: { [key: string]: any } = {};

    for (const field of forms[section]) {

        initialValues[field.name] = field.value;

        if (!field.validations) continue;

        const schema = generateValidations(field)

        validationsFields[field.name] = schema;
    }

    return {
        validationSchema: Yup.object({ ...validationsFields }),
        initialValues: initialValues as T,
        inputs: forms[section],
    };

};

💊 Creando el componente de formulario.

Primero vamos a preparar la interfaz para las props que va a recibir nuestro componente Form.

onSubmit, función que ejecuta el formulario.
labelButtonSubmit, texto que mostrara el botón.
titleForm, texto que mostrara el formulario.

Los ultimas 3 propiedades son lo que regresa la función que hicimos para generar los inputs y sus validaciones.



interface Props {
    onSubmit: (data: unknown) => void
    labelButtonSubmit?: string
    titleForm?: string

    initialValues: unknown
    validationSchema: SchemaForm
    inputs: InputProps[]
}

La propiedad validationSchema es de tipo SchemaForm.



// src/types/index.ts
export type SchemaForm = OptionalObjectSchema<{
    [x: string]: any;
}, AnyObject, TypeOfShape<{
    [x: string]: any;
}>>

Ahora creamos el componente, y dentro desestructuramos las props que recibe el componente.

Luego usamos el hook de useForm, el cual vamos a establecer un objeto como argumento, accedemos a la propiedad:

resolver, para establecer el esquema de validación, para ello usamos la función yupResolver y le pasamos como argumento el validationSchema que viene por props.
defaultValues, para establecer los valores por defecto y le asignaremos la props de initialValues.

Toma en cuenta que no desestructuramos nada del hook useForm.



import { yupResolver } from '@hookform/resolvers/yup'
import { useForm } from 'react-hook-form'

export const Form = ({ ...props }: Props) => {
    const {
        initialValues,
        inputs,
        onSubmit,
        validationSchema,
        titleForm,
        labelButtonSubmit = 'Submit'
    } = props

    const formMethods = useForm({
        resolver: yupResolver(validationSchema),
        defaultValues: { ...(initialValues as any) }
    })

    return (
        <></>
    )
}

Después, vamos a usar un componente que nos ofrece react-hook-form, que es el FormProvider y le vamos a esparcir los formMethods del hook useForm.

El FormProvider nos ayudara a comunicar el estado del formulario con los componentes (inputs) que estén anidados dentro del FormProvider. Con el propósito de separar los componentes y no tener todo en un mismo archivo.

Dentro del FormProvider colocaremos un form y en el método onSubmit de la etiqueta form, vamos a ejecutar una propiedad del formMethods, que es el handleSubmit, y como argumento le pasamos el onSubmit que recibe el componente Form por props.

Este handleSubmit, solo se va a ejecutar si no hay errores en cada input, y cuando se ejecute nos devolverá los valores de cada input.



import { FormProvider, useForm } from 'react-hook-form'

// interface

export const Form = ({ ...props }: Props) => {
    // props

    const formMethods = useForm({
        resolver: yupResolver(validationSchema),
        defaultValues: { ...(initialValues as any) }
    })

    return (
        <FormProvider {...formMethods}>
            <form
                onSubmit={formMethods.handleSubmit(onSubmit)}
                className='bg-secondary rounded-md p-10 pt-5 shadow-2xl shadow-primary/30 flex flex-col gap-2 border border-primary w-full min-h-[390px]'
            >
                <section className='flex-1 flex flex-col gap-3'>
                    {/* inputs here */}
                </section>
            </form>
        </FormProvider>
    )
}

Ahora vamos a crear una función, para retornar los diferentes tipos de inputs.
Usamos la prop inputs que desestructuramos de las props que recibe el componente Form.

En base al tipo de input vamos a renderizar un uno u otro input.

Nota que estamos usando componentes que aun no hemos creado. También nota, que de las propiedades de cada input, vamos a excluir las validations, typeValue y value, porque son valores que no necesita nuestro input directamente.

Una cosa a mejorar sobre esta función, es que puedes crear un componente aparte, y crear un diccionario con los componentes y el tipo de input.
En este caso no lo hago, para no extenderme más.



const createInputs = () =>
    inputs.map(({ validations, typeValue, value, ...inputProps }) => {

        switch (inputProps.type) {
            case 'select':
                return <CustomSelect {...inputProps} key={inputProps.name} />
            case 'checkbox':
                return <CustomCheckbox {...inputProps} key={inputProps.name} />
            case 'radio':
                return <CustomRadio {...inputProps} key={inputProps.name} />
            default:
                return <CustomInput {...inputProps} key={inputProps.name} />
        }
    })

Finalmente, ejecutamos la función createInputs dentro de la etiqueta section. E inmediatamente vamos a crear los custom inputs.



// imports 

// interface
export const Form = ({ ...props }: Props) => {
    // props

    const formMethods = useForm({
        resolver: yupResolver(validationSchema),
        defaultValues: { ...(initialValues as any) }
    })

    const createInputs = () =>
        inputs.map(({ validations, typeValue, value, ...inputProps }) => {
            switch (inputProps.type) {
                case 'select':
                    return <CustomSelect {...inputProps} key={inputProps.name} />
                case 'checkbox':
                    return <CustomCheckbox {...inputProps} key={inputProps.name} />
                case 'radio':
                    return <CustomRadio {...inputProps} key={inputProps.name} />
                default:
                    return <CustomInput {...inputProps} key={inputProps.name} />
            }
        })

    return (
        <FormProvider {...formMethods}>
            <form
                onSubmit={formMethods.handleSubmit(onSubmit)}
                className='bg-secondary rounded-md p-10 pt-5 shadow-2xl shadow-primary/30 flex flex-col gap-2 border border-primary w-full min-h-[390px]'
            >
                <section className='flex-1 flex flex-col gap-3'>
                    { createInputs() }
                </section>

            </form>
        </FormProvider>
    )
}

💊 Creando los componentes de cada input.

Primero, vamos a crear un mensaje de error, que se va a mostrar cada que la validación del input falle.

Dentro de src/components creamos ErrorMessage.tsx



interface Props { error?: string }

export const ErrorMessage = ({ error }: Props) => {
    if (!error) return null

    return (
        <div className='w-full grid place-content-end'>
            <p className='text-red-400 text-sm'>{error}</p>
        </div>
    )
}

Ahora, vamos a crear una nueva carpeta src/components/inputs y dentro crearemos 4 archivos.

Estos cuatro componentes que vamos a crear reciben props que son de tipo CustomInputProps. Puedes colocarlo en el archivo src/types/index.ts
export type CustomInputProps = Omit<InputProps, 'validations' | 'typeValue' | 'value'>

Y ademas como cada input que crearemos estará dentro de un FormProvider, podemos utilizar otro custom hook de react-hook-form, el cual es useFormContext, este hook nos ayudara a conectar el estado del formulario con el input.

CustomGenericInput.tsx

De useFormContext, obtenemos el la propiedad register, y la propiedad errors dentro del formState.



const {
        register,
        formState: { errors }
    } = useFormContext()

Creamos el error, computando el objeto de errors con la prop name que recibe el componente y obtenemos el mensaje.



const error = errors[name]?.message as string | undefined

Al momento de construir el input, necesitamos esparcir las propiedades de la función register, el cual tenemos que pasar le la prop name para que react-hook-form identifique que errores y validaciones debe tener este input.
Luego le esparcimos las demás propiedades en caso de que tenga más (como por ejemplo el placeholder).



<input
    className='py-1 px-2 rounded w-full text-black'
    {...register(name)}
    {...props}
    id={id}
/>

Asi quedaría al final este componente.



import { useFormContext } from 'react-hook-form'
import { ErrorMessage } from '../../components'
import { CustomInputProps } from '../../types'

export const CustomInput = ({ name, label, ...props }: CustomInputProps) => {
    const {
        register,
        formState: { errors }
    } = useFormContext()

    const error = errors[name]?.message as string | undefined

    const id = `${name}-${props.type}-${label}`

    return (
        <div className='w-full flex gap-1 flex-col'>
            {label && (
                <label className='text-white text-sm' htmlFor={id}>
                    {label}
                </label>
            )}

            <input
                className='py-1 px-2 rounded w-full text-black'
                {...register(name)}
                {...props}
                id={id}
            />

            <ErrorMessage error={error} />
        </div>
    )
}

CustomCheckbox.tsx



import { useFormContext } from 'react-hook-form'
import { ErrorMessage } from '../../components'
import { CustomInputProps } from '../../types'

export const CustomCheckbox = ({ name, label, ...props }: CustomInputProps) => {
    const {
        register,
        formState: { errors }
    } = useFormContext()

    const error = errors[name]?.message as string | undefined

    return (
        <div>
            <label className='flex gap-2 items-center cursor-pointer w-fit'>
                <input {...props} {...register(name)} />
                {label}
            </label>

            <ErrorMessage error={error} />
        </div>
    )
}

CustomSelect.tsx

Este input es casi igual que todos los demás, solo que aquí tenemos la prop options donde vendrán los valores del select que se pueden seleccionar.



import { useFormContext } from 'react-hook-form'
import { ErrorMessage } from '../../components'
import { CustomInputProps } from '../../types'

export const CustomSelect = ({ name, label, options, ...props }: CustomInputProps) => {
    const {
        register,
        formState: { errors }
    } = useFormContext()

    const error = errors[name]?.message as string | undefined
    const id = `${name}-${props.type}-${label}`

    return (
        <div className='flex flex-col gap-2'>
            <div className='flex items-center gap-4'>
                <label htmlFor={id}>{label}</label>

                <select {...register(name)} {...props} id={id} className='p-2 rounded flex-1 text-black'>

                    <option value=''>--- Select option ---</option>

                    {options &&
                        options.map(({ desc, value }) => (
                            <option key={value} value={value}>
                                {desc}
                            </option>
                    ))}

                </select>

            </div>
            <ErrorMessage error={error} />
        </div>
    )
}

CustomRadioGroup

Muy parecido al CustomSelect.tsx. Solo que aquí renderizamos un input de tipo radio.



import { useFormContext } from 'react-hook-form'
import { ErrorMessage } from '../../components'
import { CustomInputProps } from '../../types'

export const CustomRadio = ({ name, label, options, ...props }: CustomInputProps) => {
    const {
        register,
        formState: { errors }
    } = useFormContext()

    const error = errors[name]?.message as string | undefined

    return (
        <div className='flex flex-col'>
            <div className='flex items-center gap-4'>
                <label>{label}</label>

                <section className='flex justify-between flex-1'>
                    {options &&
                        options.map(({ desc, value }) => (

                            <label
                                key={value}
                                className='flex items-center gap-1 cursor-pointer hover:underline rounded p-1'
                            >
                                <input {...register(name)} {...props} value={value} type='radio' />
                                {desc}
                            </label>

                        ))}
                </section>
            </div>
            <ErrorMessage error={error} />
        </div>
    )
}

💊 Usando nuestro componente Form.

Ahora vamos al archivo src/App.tsx

Para usar el componente Form.

Tenemos que ejecutar la función getInputs y obtener las validaciones, valores iniciales e inputs. Lo haremos fuera del componente. También creamos una interfaz para que los valores iniciales se comporten como dicha interfaz.



interface SignUpFormType {
    username: string
    password: string
    repeat_password: string
}

const signUpForm = getInputs<SignUpFormType>('register')

Luego importamos el componente Form, le esparcimos las propiedades que nos regresa getInput. Y también le pasamos las demás props.



import { Layout, Form } from './components'
import { getInputs } from './lib'

interface SignUpFormType {
    username: string
    password: string
    repeat_password: string
}


const signUpForm = getInputs<SignUpFormType>('register')

const App = () => {

    const onSubmitSignUp = (data: unknown) => console.log({ singUp: data })

    return (
        <Layout>
            <Form
                {...signUpForm}
                onSubmit={onSubmitSignUp}
                titleForm='Sign Up!'
                labelButtonSubmit='Create account'
            />
        </Layout>
    )
}
export default App

En el caso de que quieras sobrescribir los valores iniciales, solamente te creas una nueva constante esparciendo los valores iniciales y luego sobrescribiendo lo que necesites. Para luego pasar le un nuevo valor a la prop de initialValues.




const App = () => {
    const onSubmitSignUp = (data: unknown) => console.log({ singUp: data })

    const initialValuesSignUp: SignUpFormType = {
        ...signUpForm.initialValues,
        username: '@franklin361'
    }

    return (
        <Layout>
            <Form
                {...signUpForm}

                initialValues={initialValuesSignUp}

                onSubmit={onSubmitSignUp}
                titleForm='Sign Up!'
                labelButtonSubmit='Create account'
            />
        </Layout>
    )
}
export default App

Y asi mismo puedes incluir varios formularios de manera dinámica.



import { Layout, Form } from './components'
import { getInputs } from './lib'

interface SignUpFormType {
    username: string
    password: string
    repeat_password: string
}

interface AnotherFormType {}

const signUpForm = getInputs<SignUpFormType>('register')
const anotherForm = getInputs<AnotherFormType>('another')

const App = () => {
    const onSubmitSignUp = (data: unknown) => console.log({ singUp: data })

    const onSubmitAnotherForm = (data: unknown) => console.log({ another: data })

    const initialValuesSignUp: SignUpFormType = {
        ...signUpForm.initialValues,
        username: '@franklin361'
    }

    return (
        <Layout>
            <Form
                {...signUpForm}
                initialValues={initialValuesSignUp}
                titleForm='Sign Up!'
                onSubmit={onSubmitSignUp}
                labelButtonSubmit='Create account'
            />

            <Form
                {...anotherForm}
                titleForm='Another form!'
                onSubmit={onSubmitAnotherForm}
                labelButtonSubmit='Send info'
            />
        </Layout>
    )
}
export default App

💊 Conclusión.

React Hook Form es una de mis librearas favoritas, ya que tiene ciertas ventajas sobre otras librerías populares como por ejemplo Formik; como por ejemplo el bundle size es mas pequeño, tiene menos dependencias, produce menos re-renders, etc. 😉

Pero de igual manera ambas son librerías muy usadas.

Espero que te haya gustado esta publicación y que también espero haberte ayudado a entender como realizar formularios dinámicos usando React Hook Form. 🙌

Si conoces alguna otra forma distinta o mejor de realizar esta aplicación con gusto puedes comentarla.

Te invito a que revises mi portafolio en caso de que estés interesado en contactarme para algún proyecto! Franklin Martinez Lucas

🔵 No olvides seguirme también en twitter: @Frankomtz361

💊 Demostración simple.

https://dynamic-form-rhf.netlify.app/

💊 Código fuente.

https://github.com/Franklin361/dynamic-form-rhf/

Dynamic forms with React Hook Form. 📝

Franklin Martinez — Fri, 10 Mar 2023 13:46:39 +0000

This time, we will again create dynamic forms but now with the help of the react-hook-form library.

Note 📣: You need to have knowledge in Typescript to follow this tutorial, as well as React JS.

You might be interested in this article, where we also do the same as in this post, but using the Formik library. 😉

Dynamic forms with Formik and React JS. 📝

Franklin Martinez ・ Oct 28 '22

#react #javascript #tutorial #webdev

Table of contents.

📌 Technologies to be used.

📌 Creating the project.

📌 First steps.

📌 Creating the form object.

📌 Creating the typing for the inputs.

📌 Now we create the form object with the help of the typing.

📌 Creating the validation schema for our form.

📌 Function to generate the inputs.

📌 Creating the form component.

📌 Creating the components of each input.

📌 Using our Form component.
📌 Conclusion.

📌 Demo.

📌 Source Code.

💊 Technologies to be used.

React JS 18.2.0
TypeScript 4.9.3
React Hook Form 7.43.0
Vite JS 4.1.0
Tailwind CSS 3.2.4 (neither the installation nor the configuration process is displayed).

💊 Creating the project.

We will name the project: dynamic-forms-rhf (optional, you can name it whatever you like).



npm create vite@latest

We create the project with Vite JS and select React with TypeScript.

Then we run the following command to navigate to the directory just created.



cd dynamic-forms-rhf

Then we install the dependencies.



npm install

Then we open the project in a code editor (in my case VS code).



code .

💊 First steps.

Inside the src/App.tsx file we delete everything and create a component that displays a hello world.



const App = () => {
    return (
        <div>Hello world</div>
    )
}
export default App

🚨 Note: Each time we create a new folder, we will also create an index.ts file to group and export all the functions and components of other files that are inside the same folder, so that these functions can be imported through a single reference, this is known as barrel file.

Let's create a layout, create a folder src/components and inside create a file Layout.tsx.



export const Layout = ({ children }: { children: JSX.Element | JSX.Element[] }) => {
    return (
        <>
            <h1 className='text-center my-10 text-5xl'>
                <span>Dynamic Form</span>
                <span className='font-bold bg-clip-text text-transparent  text-[#EC5990]'>
                    {' - '}
                    React Hook Form
                </span>
            </h1>

            <main className='grid sm:grid-cols-2 grid-cols-1 sm:mb-0 mb-10 gap-10 place-items-start justify-items-center px-5'>
                {children}
            </main>
        </>
    )
}

Now, inside the src/App.tsx file, we add the layout.



import { Layout } from './components'

const App = () => {

    return (
        <Layout>
            <span>Form</span>
        </Layout>
    )
}
export default App

Then we are going to install the necessary packages.

react-hook-form, to handle the forms in an easier way.
yup, to handle form validations.
@hookform/resolvers, to integrate yup with react-hook-form.



npm install -E react-hook-form @hookform/resolvers yup

Previously I had already done this same exercise of dynamic forms but using the Formik library, and the truth is very similar to what we are going to do, the only thing to change are the components such as the form and inputs.

💊 Creating the form object.

💊 Creating the typing for the inputs.

First, let's create the typing. We create a new folder src/types and create the index.ts file.

Now first we create the interface for the inputs, which can have even more properties, but these are enough to make this example.

The highlights are the last three properties of the InputProps interface:

typeValue: necessary since we need to tell Yup what type of value the input accepts.
validations: validations that will be set to Yup based on the input; I only put basic validations, although you can integrate more if you look in the Yup documentation.
- The validation that may be more complicated for you may be oneOf, if you have not used Yup. This validation needs a reference or the name of another input to validate if both inputs contain the same content. An example of where to use this validation is in an input where you create a password and another one where you have to repeat password and both values have to match.
options: this property is necessary only if the input is a select or a group of radio type inputs.



export interface InputProps {
    type: 'text' | 'radio' | 'email' | 'password' | 'select' | 'checkbox'
    name: string
    value: string | number | boolean
    placeholder?: string
    label?: string

    typeValue?:  'boolean' | 'number'
    validations?: Validation[]
    options?: Opt[]
}

export interface Opt {
    value: string | number
    desc: string
}

export interface Validation {
    type: 'required' | 'isEmail' | 'minLength' | 'isTrue' | 'oneOf'
    value?: string | number | boolean
    message: string
    ref?: string
}

Also at once we create this type for the types of forms we are going to develop.
In this case we are only going to create two forms.



export type FormSection = 'register' | 'another'

💊 Now we create the form object with the help of the typing.

Thanks to Typescript we can create our forms in this object.
We create a new folder src/lib and inside we create the file form.ts and add the following:



import { FormSection, InputProps } from '../types';

export const forms: { [K in FormSection]: InputProps[] } =
{

    register: [
        {
            label: "New username",
            type: "text",
            name: "username",
            placeholder: "New username",
            value: "",
            validations: [
                {
                    type: "minLength",
                    value: 3,
                    message: "Min. 3 characters",
                },
                {
                    type: "required",
                    message: "Username is required"
                },
            ],

        },
        {
            label: "New Password",
            type: "password",
            name: "password",
            placeholder: "New password",
            value: "",
            validations: [
                {
                    type: "required",
                    message: "Password is required"
                },
                {
                    type: "minLength",
                    value: 5,
                    message: "Min. 5 characters",
                }
            ],

        },
        {
            label: 'Repeat your password',
            type: "password",
            name: "repeat_password",
            placeholder: "Repeat password",
            value: "",
            validations: [
                {
                    type: "required",
                    message: "Repeat password is required"
                },
                {
                    type: "minLength",
                    value: 5,
                    message: "Min. 5 characters",
                },
                {
                    type: 'oneOf',
                    message: 'Passwords must match',
                    ref: 'password'
                }
            ],

        },

    ],

    another: [

        {
            label: "E-mail address",
            type: "email",
            name: "email",
            placeholder: "correo@correo.com",
            value: "",
            validations: [
                {
                    type: "required",
                    message: "Email is required"
                },
                {
                    type: "isEmail",
                    message: "Email no valid"
                }
            ],

        },
        {
            type: "select",
            name: "rol",
            label: "Select an option: ",
            value: "",
            options: [
                {
                    value: "admin",
                    desc: "Admin",
                },
                {
                    value: "user",
                    desc: "User"
                },
                {
                    value: "super-admin",
                    desc: "Super Admin"
                }
            ],
            validations: [
                {
                    type: "required",
                    message: "Rol is required"
                }
            ]
        },
        {
            type: "radio",
            name: "gender",
            label: "Gender: ",
            value: "",
            options: [
                {
                    value: 'man',
                    desc: "Man"
                },
                {

                    value: "woman",
                    desc: "Woman"
                },
                {

                    value: "other",
                    desc: "Other"
                },
            ],
            validations: [
                {
                    type: "required",
                    message: "Gender is required"
                }
            ]
        },
        {
            type: "checkbox",
            name: "terms",
            typeValue: "boolean",
            label: "Terms and Conditions",
            value: false,
            validations: [
                {
                    type: "isTrue",
                    message: "Accept the terms!"
                }
            ]
        },
    ]
}

💊 Creating the validation schema for our form.

Let's create a new file in src/lib and name it getInputs.ts.
We create a new function to generate the validations to each input.
This function receives the fields, and each field is of type InputProps. We are also going to create 2 types only so that Typescript does not bother us later.

Note that we created the types YupBoolean and YupString. If you want you can add other types either to handle some other data type like numeric or array. For example:
  type YupNumber = Yup.NumberSchema<boolean | undefined, AnyObject, number | undefined>
I don't add it, because in my interfaces I don't handle any validation of type number or array.



import * as Yup from "yup";
import { AnyObject } from "yup/lib/types";
import { FormSection, InputProps } from '../types';
import { forms } from '../lib';

type YupBoolean = Yup.BooleanSchema<boolean | undefined, AnyObject, boolean | undefined>
type YupString = Yup.StringSchema<string | undefined, AnyObject, string | undefined>

const generateValidations = (field: InputProps) => {}

First we create a variable that will be initialized with the datatype that will handle our input. The datatype we obtain it from the typeValue property, in case it is undefined by default the datatype will be string, and then we execute the function



let schema = Yup[field.typeValue || 'string']()

Then we are going to go through the validations of the field, since it is an array.

Within the loop, we will use a switch case, evaluating what type of rule the field has.



const generateValidations = (field: InputProps) => {

    let schema = Yup[field.typeValue || 'string']()

    for (const rule of field.validations) {

        switch (rule.type) { }
    }
}

In each case of the switch we will overwrite the schema variable. In the following way:

If it has an 'isTrue' validation it means that the input handles Boolean values, so we want our schema to behave as a YupBoolean, otherwise Typescript would be complaining. Then we execute the function that has to do with each case.

For example, in the case of 'isTrue', we execute the function with the exact same name, and inside we pass the message



case 'isTrue'   : schema = (schema as YupBoolean).isTrue(rule.message);  break;

In the case that the validation is oneOf, we need to send it, as first parameter an array and as second parameter a message.

In the case of the array, it must be the value you want to match, but in this case we want to match the value of another field, so we use Yup.ref which needs a string that refers to the name attribute of an input.
So that when the validation is done, it checks if both fields contain the same value.



case 'oneOf'    : schema = (schema as YupString)
                                            .oneOf(
                                                    [ Yup.ref(rule.ref as string) ], 
                                                    rule.message
                                                  ); 
break;

This is how our first function would look like. At the end we return the variable schema.
Note that at the beginning of the function, we place a condition where if the field has no validations then return null and avoid executing the cycle.



import * as Yup from "yup";
import { AnyObject } from "yup/lib/types";
import { FormSection, InputProps } from '../types';
import { forms } from '../lib';

type YupBoolean = Yup.BooleanSchema<boolean | undefined, AnyObject, boolean | undefined>
type YupString = Yup.StringSchema<string | undefined, AnyObject, string | undefined>

const generateValidations = (field: InputProps) => {

    if (!field.validations) return null

    let schema = Yup[field.typeValue || 'string']()

    for (const rule of field.validations) {
        switch (rule.type) {
            case 'isTrue'   : schema = (schema as YupBoolean).isTrue(rule.message);  break;
            case 'isEmail'  : schema = (schema as YupString).email(rule.message);  break;
            case 'minLength': schema = (schema as YupString).min(rule?.value as number, rule.message);  break;
            case 'oneOf'    : schema = (schema as YupString).oneOf([Yup.ref((rule as any).ref)], rule.message);  break;
            default         : schema = schema.required(rule.message);  break;
        }
    }

    return schema
}

💊 Function to generate the inputs.

First we are going to create a function and we name it getInputs, which is of generic type and receives as parameter the section (that is to say that form you want to obtain its fields, in this case it can be the form of signUp or the other one).

We are going to create two variables that we will initialize them as empty objects and that at the end will have to contain new properties.




export const getInputs = <T>(section: FormSection) => {

    let initialValues: { [key: string]: any } = {};

    let validationsFields: { [key: string]: any } = {};

};

Inside the function we will make a for of loop. In which we are going to go through the fields of a specific form.

Inside the cycle, we are going to compute the values in the initialValues variable, and to compute the values we use the name property of the field.
We verify if there are validations for the field.
- If there are no validations, then continue with the next field.
- If there are validations, we execute the function that we created before generateValidations sending the field as argument.
Then to the validationsFields variable, we also compute the values using the name property of the field, and we assign the validation schema that has been generated.



for (const field of forms[section]) {

    initialValues[field.name] = field.value;

    if (!field.validations) continue;

    const schema = generateValidations(field)

    validationsFields[field.name] = schema;
}

Once the cycle is finished, we must return 3 properties.

The validation schema inside a Yup.object, spreading the validationsFields properties. ```tsx

validationSchema: Yup.object({ ...validationsFields }),

- The initial values, and we will make them behave as generic so that we can use them afterwards
```tsx


initialValues: initialValues as T,

The fields that we want to show in our form. ```tsx

inputs: forms[section]

This is what our function will look like at the end
```tsx



export const getInputs = <T>(section: FormSection) => {

    let initialValues: { [key: string]: any } = {};

    let validationsFields: { [key: string]: any } = {};

    for (const field of forms[section]) {

        initialValues[field.name] = field.value;

        if (!field.validations) continue;

        const schema = generateValidations(field)

        validationsFields[field.name] = schema;
    }

    return {
        validationSchema: Yup.object({ ...validationsFields }),
        initialValues: initialValues as T,
        inputs: forms[section],
    };

};

💊 Creating the form component.

First we are going to prepare the interface for the props that our Form component is going to receive.

onSubmit, function that executes the form.
labelButtonSubmit, text that will show the button.
titleForm, text that will show the form.

The last 3 properties are what returns the function that we did to generate the inputs and their validations.



interface Props {
    onSubmit: (data: unknown) => void
    labelButtonSubmit?: string
    titleForm?: string

    initialValues: unknown
    validationSchema: SchemaForm
    inputs: InputProps[]
}

The validationSchema property is of type SchemaForm.



// src/types/index.ts
export type SchemaForm = OptionalObjectSchema<{
    [x: string]: any;
}, AnyObject, TypeOfShape<{
    [x: string]: any;
}>>

Now we create the component, and inside we destructure the props that the component receives.

Then we use the hook of useForm, which we are going to establish an object as argument, we access to the property:

resolver, to set the validation scheme, for this we use the function yupResolver and we pass as argument the validationSchema that comes by props.
defaultValues, to establish the default values and we will assign the props of initialValues.

Note that we do not destructure anything of the useForm hook.



import { yupResolver } from '@hookform/resolvers/yup'
import { useForm } from 'react-hook-form'

export const Form = ({ ...props }: Props) => {
    const {
        initialValues,
        inputs,
        onSubmit,
        validationSchema,
        titleForm,
        labelButtonSubmit = 'Submit'
    } = props

    const formMethods = useForm({
        resolver: yupResolver(validationSchema),
        defaultValues: { ...(initialValues as any) }
    })

    return (
        <></>
    )
}

Next, we are going to use a component that offers us react-hook-form, which is the FormProvider and we are going to spread the formMethods of the useForm hook.

The FormProvider will help us to communicate the state of the form with the components (inputs) that are nested inside the FormProvider. With the purpose of separating the components and not having everything in the same file.

Inside the FormProvider we will place a form and in the onSubmit method of the form label, we are going to execute a property of the formMethods, which is the handleSubmit, and as argument we pass the onSubmit that receives the component Form by props.

This handleSubmit will only be executed if there are no errors in each input, and when it is executed it will return the values of each input.



import { FormProvider, useForm } from 'react-hook-form'

// interface

export const Form = ({ ...props }: Props) => {
    // props

    const formMethods = useForm({
        resolver: yupResolver(validationSchema),
        defaultValues: { ...(initialValues as any) }
    })

    return (
        <FormProvider {...formMethods}>
            <form
                onSubmit={formMethods.handleSubmit(onSubmit)}
                className='bg-secondary rounded-md p-10 pt-5 shadow-2xl shadow-primary/30 flex flex-col gap-2 border border-primary w-full min-h-[390px]'
            >
                <section className='flex-1 flex flex-col gap-3'>
                    {/* inputs here */}
                </section>
            </form>
        </FormProvider>
    )
}

Now we are going to create a function, to return the different types of inputs.
We use the prop inputs that we destructured of the props that the Form component receives.

Based on the type of input we are going to render one or another input.

Note that we are using components that we have not yet created. Also note, that from the properties of each input, we are going to exclude the validations, typeValue and value, because they are values that our input does not need directly.

One thing to improve about this function, is that you can create a separate component, and create a dictionary with the components and the type of input.
In this case I do not do it, so as not to extend more.



const createInputs = () =>
    inputs.map(({ validations, typeValue, value, ...inputProps }) => {

        switch (inputProps.type) {
            case 'select':
                return <CustomSelect {...inputProps} key={inputProps.name} />
            case 'checkbox':
                return <CustomCheckbox {...inputProps} key={inputProps.name} />
            case 'radio':
                return <CustomRadio {...inputProps} key={inputProps.name} />
            default:
                return <CustomInput {...inputProps} key={inputProps.name} />
        }
    })

Finally, we execute the createInputs function inside the section tag. And immediately we are going to create the custom inputs.



// imports 

// interface
export const Form = ({ ...props }: Props) => {
    // props

    const formMethods = useForm({
        resolver: yupResolver(validationSchema),
        defaultValues: { ...(initialValues as any) }
    })

    const createInputs = () =>
        inputs.map(({ validations, typeValue, value, ...inputProps }) => {
            switch (inputProps.type) {
                case 'select':
                    return <CustomSelect {...inputProps} key={inputProps.name} />
                case 'checkbox':
                    return <CustomCheckbox {...inputProps} key={inputProps.name} />
                case 'radio':
                    return <CustomRadio {...inputProps} key={inputProps.name} />
                default:
                    return <CustomInput {...inputProps} key={inputProps.name} />
            }
        })

    return (
        <FormProvider {...formMethods}>
            <form
                onSubmit={formMethods.handleSubmit(onSubmit)}
                className='bg-secondary rounded-md p-10 pt-5 shadow-2xl shadow-primary/30 flex flex-col gap-2 border border-primary w-full min-h-[390px]'
            >
                <section className='flex-1 flex flex-col gap-3'>
                    { createInputs() }
                </section>

            </form>
        </FormProvider>
    )
}

💊 Creating the components of each input.

First, we are going to create an error message, which is going to be displayed every time the input validation fails.

Inside src/components we create ErrorMessage.tsx.



interface Props { error?: string }

export const ErrorMessage = ({ error }: Props) => {
    if (!error) return null

    return (
        <div className='w-full grid place-content-end'>
            <p className='text-red-400 text-sm'>{error}</p>
        </div>
    )
}

Now, we are going to create a new folder src/components/inputs and inside we will create 4 files.

These four components that we are going to create receive props that are of type CustomInputProps. You can place it in the src/types/index.ts file.
export type CustomInputProps = Omit<InputProps, 'validations' | 'typeValue' | 'value'>

And also as each input that we will create will be inside a FormProvider, we can use another custom hook of react-hook-form, which is useFormContext, this hook will help us to connect the state of the form with the input.

CustomGenericInput.tsx

From useFormContext, we obtain the register property, and the errors property inside the formState.



const {
        register,
        formState: { errors }
    } = useFormContext()

We create the error, computing the error object with the prop name that the component receives and we obtain the message.



const error = errors[name]?.message as string | undefined

At the moment of constructing the input, we need to spread the properties of the register function, which we have to pass the prop name so that react-hook-form identifies what errors and validations this input should have.
Then, we spread the other properties in case it has more (such as the placeholder).



<input
    className='py-1 px-2 rounded w-full text-black'
    {...register(name)}
    {...props}
    id={id}
/>

This is how this component will look like in the end.



import { useFormContext } from 'react-hook-form'
import { ErrorMessage } from '../../components'
import { CustomInputProps } from '../../types'

export const CustomInput = ({ name, label, ...props }: CustomInputProps) => {
    const {
        register,
        formState: { errors }
    } = useFormContext()

    const error = errors[name]?.message as string | undefined

    const id = `${name}-${props.type}-${label}`

    return (
        <div className='w-full flex gap-1 flex-col'>
            {label && (
                <label className='text-white text-sm' htmlFor={id}>
                    {label}
                </label>
            )}

            <input
                className='py-1 px-2 rounded w-full text-black'
                {...register(name)}
                {...props}
                id={id}
            />

            <ErrorMessage error={error} />
        </div>
    )
}

CustomCheckbox.tsx



import { useFormContext } from 'react-hook-form'
import { ErrorMessage } from '../../components'
import { CustomInputProps } from '../../types'

export const CustomCheckbox = ({ name, label, ...props }: CustomInputProps) => {
    const {
        register,
        formState: { errors }
    } = useFormContext()

    const error = errors[name]?.message as string | undefined

    return (
        <div>
            <label className='flex gap-2 items-center cursor-pointer w-fit'>
                <input {...props} {...register(name)} />
                {label}
            </label>

            <ErrorMessage error={error} />
        </div>
    )
}

CustomSelect.tsx

This input is almost the same as all the others, only here we have the prop options where the values of the select that can be selected will come.



import { useFormContext } from 'react-hook-form'
import { ErrorMessage } from '../../components'
import { CustomInputProps } from '../../types'

export const CustomSelect = ({ name, label, options, ...props }: CustomInputProps) => {
    const {
        register,
        formState: { errors }
    } = useFormContext()

    const error = errors[name]?.message as string | undefined
    const id = `${name}-${props.type}-${label}`

    return (
        <div className='flex flex-col gap-2'>
            <div className='flex items-center gap-4'>
                <label htmlFor={id}>{label}</label>

                <select {...register(name)} {...props} id={id} className='p-2 rounded flex-1 text-black'>

                    <option value=''>--- Select option ---</option>

                    {options &&
                        options.map(({ desc, value }) => (
                            <option key={value} value={value}>
                                {desc}
                            </option>
                    ))}

                </select>

            </div>
            <ErrorMessage error={error} />
        </div>
    )
}

CustomRadioGroup

Very similar to CustomSelect.tsx. Only here we render an input of type radio.



import { useFormContext } from 'react-hook-form'
import { ErrorMessage } from '../../components'
import { CustomInputProps } from '../../types'

export const CustomRadio = ({ name, label, options, ...props }: CustomInputProps) => {
    const {
        register,
        formState: { errors }
    } = useFormContext()

    const error = errors[name]?.message as string | undefined

    return (
        <div className='flex flex-col'>
            <div className='flex items-center gap-4'>
                <label>{label}</label>

                <section className='flex justify-between flex-1'>
                    {options &&
                        options.map(({ desc, value }) => (

                            <label
                                key={value}
                                className='flex items-center gap-1 cursor-pointer hover:underline rounded p-1'
                            >
                                <input {...register(name)} {...props} value={value} type='radio' />
                                {desc}
                            </label>

                        ))}
                </section>
            </div>
            <ErrorMessage error={error} />
        </div>
    )
}

💊 Using our Form component.

Now we go to the src/App.tsx file.

To use the Form component.

We have to execute the getInputs function and get the validations, initial values and inputs. We will do it outside the component. We also create an interface so that the initial values behave like that interface.



interface SignUpFormType {
    username: string
    password: string
    repeat_password: string
}

const signUpForm = getInputs<SignUpFormType>('register')

Then we import the Form component, we spread the properties returned by getInput. And we also pass it the other props.



import { Layout, Form } from './components'
import { getInputs } from './lib'

interface SignUpFormType {
    username: string
    password: string
    repeat_password: string
}


const signUpForm = getInputs<SignUpFormType>('register')

const App = () => {

    const onSubmitSignUp = (data: unknown) => console.log({ singUp: data })

    return (
        <Layout>
            <Form
                {...signUpForm}
                onSubmit={onSubmitSignUp}
                titleForm='Sign Up!'
                labelButtonSubmit='Create account'
            />
        </Layout>
    )
}
export default App

In case you want to overwrite the initial values, you just create a new constant by spreading the initial values and then overwriting what you need. Then pass a new value to the initialValues prop.




const App = () => {
    const onSubmitSignUp = (data: unknown) => console.log({ singUp: data })

    const initialValuesSignUp: SignUpFormType = {
        ...signUpForm.initialValues,
        username: '@franklin361'
    }

    return (
        <Layout>
            <Form
                {...signUpForm}

                initialValues={initialValuesSignUp}

                onSubmit={onSubmitSignUp}
                titleForm='Sign Up!'
                labelButtonSubmit='Create account'
            />
        </Layout>
    )
}
export default App

And you can also include several forms dynamically.



import { Layout, Form } from './components'
import { getInputs } from './lib'

interface SignUpFormType {
    username: string
    password: string
    repeat_password: string
}

interface AnotherFormType {}

const signUpForm = getInputs<SignUpFormType>('register')
const anotherForm = getInputs<AnotherFormType>('another')

const App = () => {
    const onSubmitSignUp = (data: unknown) => console.log({ singUp: data })

    const onSubmitAnotherForm = (data: unknown) => console.log({ another: data })

    const initialValuesSignUp: SignUpFormType = {
        ...signUpForm.initialValues,
        username: '@franklin361'
    }

    return (
        <Layout>
            <Form
                {...signUpForm}
                initialValues={initialValuesSignUp}
                titleForm='Sign Up!'
                onSubmit={onSubmitSignUp}
                labelButtonSubmit='Create account'
            />

            <Form
                {...anotherForm}
                titleForm='Another form!'
                onSubmit={onSubmitAnotherForm}
                labelButtonSubmit='Send info'
            />
        </Layout>
    )
}
export default App

💊 Conclusion.

React Hook Form is one of my favorite libraries, because it has certain advantages over other popular libraries such as Formik; for example the bundle size is smaller, it has fewer dependencies, produces fewer re-renders, etc. 😉.

But still both are very used libraries.

I hope you liked this post and I also hope I helped you to understand how to make dynamic forms using React Hook Form 🙌.

If you know any other different or better way to make this application feel free to comment it.

I invite you to review my portfolio in case you are interested in contacting me for a project.! Franklin Martinez Lucas

🔵 Don't forget to follow me also on twitter: @Frankomtz361

💊 Demo.

https://dynamic-form-rhf.netlify.app/

💊 Source code.

https://github.com/Franklin361/dynamic-form-rhf/

Code splitting en React JS.

Franklin Martinez — Fri, 03 Mar 2023 14:25:39 +0000

Cuando tus aplicaciones crecen, seria considerable mejorar la velocidad de carga inicial para hacerla mas pequeña y así evitar que el usuario se vaya de nuestra app por tener que estar esperando a que cargue.

Y para eso, podemos usar code splitting, lo cual nos ayudara bastante en nuestras aplicaciones.

Nota: Para entender este post, tienes que tener bases de react router dom, ya que us una librería que vamos a usar para explicar el code splitting.

Tabla de contenido.

📌 Tecnologías a utilizar.

📌 ¿Qué es code splitting?

📌 Creando el proyecto.

📌 Primeros pasos.

📌 Aplicando code splitting.

📌 Conclusión.

💢 Tecnologías a utilizar.

React JS v18.2.0
React router dom v6.7.0
Vite JS v4.0.0
TypeScript v4.9.3

💢 ¿Qué es code splitting?

Primero hay que entender como funcionan la mayoría de los frameworks.
Ya que muchos agrupan todas las dependencias en un gran archivo, lo cual facilita la adición de JavaScript a una página HTML.
En teoría, agrupar JavaScript de este modo debería acelerar la carga de las páginas y reducir la cantidad de tráfico que éstas deben gestionar.

Pero a medida que una aplicación crece, el tamaño de sus paquetes (bundles) también crece y, en algún momento, sus paquetes serán tan grandes que tardarán mucho en cargarse.

Aquí es donde entra la técnica de code splitting. Code splitting o división de código traducido a español, consiste en separar el código en varios paquetes o componentes que pueden cargarse bajo demanda o en paralelo. Esto significa que no se cargan hasta que son necesarias.

La página sigue cargando la misma cantidad de código, pero la diferencia se debe a que la página puede no ejecutar todo el código que carga

Los beneficios del code splitting son:

La velocidad a la que un sitio web carga y muestra el contenido se vuelve más rápida.
El tiempo de interacción, mejoran
Disminuye el porcentaje de usuarios que abandonan la página web sin interactuar con ella.

💢 Creando el proyecto.

Al proyecto le colocaremos el nombre de: code-splitting-react (opcional, tu le puedes poner el nombre que gustes).

npm create vite@latest

Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.

cd code-splitting-react

Luego instalamos las dependencias.

npm install

Después abrimos el proyecto en un editor de código (en mi caso VS code).

code .

💢 Primeros pasos.

Primero vamos crear unas cuantas paginas. Creamos la carpeta src/pages y dentro creamos 6 archivos. Las cuales serán muy sencillas con muy poco contenido.

Observa que lo único que coloco es un div con el nombre correspondiente a la pagina.

1- Profile.tsx

export const Profile = () => {
    return (
        <div>Profile</div>
    )
}

Bueno hacemos lo mismo con los siguientes 4 paginas

2- About.tsx
3- Contact.tsx
4- FAQs.tsx
5- Login.tsx

En este archivo solo exportaremos cada pagina, o sea lo usaremos como un archivo barril

6- index.ts

export * from './About';
export * from './Contact';
export * from './FAQs';
export * from './Login';
export * from './Profile';

Ahora si vamos a crear un ejemplo sobre como normalmente crearíamos un app con rutas sin aplicar code splitting.

Instalamos react router dom

npm install react-router-dom

Creamos una carpeta src/components y creamos un archivo NavBar.tsx

import { Link } from 'react-router-dom';

export const NavBar = () => {
    return (
        <nav>
            <Link to='/home'>Home</Link>
            <Link to='/about'>About</Link>
            <Link to='/contact'>Contact</Link>
            <Link to='/faqs'>FAQs</Link>
        </nav>
    )
}

Y ahora dentro del archivo src/App.tsx borramos todo su contenido y creamos un nuevo componente.

import { BrowserRouter, Navigate } from 'react-router-dom';
import { NavBar } from './components/NavBar';
import { About, Contact, FAQs, Profile, Login } from './pages'

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='profile' element={ <Profile /> } />
        <Route path='contact' element={ <Contact /> } />
        <Route path='about' element={ <About /> } />
        <Route path='faqs' element={ <FAQs /> } />
        <Route path='login' element={ <Login /> } />

        <Route path='/*' element={<Navigate to='/login' replace />} />
      </Routes>
    </BrowserRouter>
  )
}
export default App

Ahora vamos a modificar un poco, para simular las rutas privadas. Así que en el mismo archivo creamos unos 2 nuevos componentes.

En este componente vamos a tener estas rutas, que serán las privadas, o sea que el usuario las vera hasta que sea autenticado.
También nota que aquí vamos a mostrar el

export const PrivateRoutes = () => {
  return (
    <>
      <NavBar />
      <Routes>
        <Route path='profile' element={ <Profile /> } />
        <Route path='about'   element={ <About />   } />
        <Route path='contact' element={ <Contact /> } />
        <Route path='faqs'    element={ <FAQs />    } />

        <Route path='/*'      element={<Navigate to='/profile' replace />} />
      </Routes>
    </>
  )
}

Luego tenemos las rutas publicas.


export const PublicRoutes = () => {
  return (
    <Routes>
      <Route path='login' element={ <Login /> } />

      <Route path='/*' element={<Navigate to='/login' replace />} />
    </Routes>
  )
}

Por ultimo modificamos el componente App.
Creamos una constante para simular la autenticación.
Y Dependiendo de esa constante se crearan una rutas u otras.

const isAuthenticated = false

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {
          (isAuthenticated)
            ? <Route path="/*" element={<PrivateRoutes />} />
            : <Route path="/*" element={<PublicRoutes />} />
        }
      </Routes>
    </BrowserRouter>
  )
}
export default App

Tal vez creas que por que solo renderizamos unas rutas y otras no, las rutas que no se renderizan no se van a cargar. Pero la verdad es que aunque no se renderize, ya sea la ruta publica o privada en pantalla, siempre se van a cargar todos los componentes, todas las paginas y su css y demás paquetes.

Y puedes comprobarlo si ejecutas la app, y vas a inspeccionar la pagina en la pestaña de Network y lo filtras por archivos JS, veras como se cargan todas las paginas, Login.tsx, Profile.tsx, About.tsx, etc.

Tal vez ahorita no notes algún problema en la velocidad de carga, pues esta app, no tiene casi nada de contenido. Pero si imaginas que tengas mas componentes o mas paquetes instalados, tu aplicación cargaría todo incluso si no lo estas usando.

Asi que vamos a tratar de resolver este problema con code splitting.

💢 Aplicando code splitting.

En este momento tenemos una "autenticación" que nos permitirá o no ver las paginas privadas.
Pero anteriormente vimos que aunque estés autenticado o no, siempre se cargaran las paginas.

Así que, que pasa si el usuario, solo quiere ingresar al Login y ya, entonces no hay necesidad de cargar las otras paginas que son privadas. O que tal si el usuario ya esta autenticado, no hay necesidad de cargar el Login, sino hasta que el usuario decida cerrar sesión.

Bueno para aplicar code splitting, vamos a usar:

React.lazy. Característica proporcionada directamente por React, permite la carga perezosa de importaciones. Se trata de una función de componente, que toma como parámetro otra y finalmente devuelve una promesa como resultado que se espera que se resuelva un componente de React.

const Login = lazy(() => import('./pages/Login'));

Pero, tal vez te salga un error, esto debido a que la función de lazy espera que el componente que quieres que devuelva sea una exportación por defecto.

Asi que solamente vamos a cada pagina, y agregamos su exportación por defecto

Toma de ejemplo pages/Login.tsx. Haremos lo mismo con todas las paginas.

const Login = () => {
    return (
        <div>Login</div>
    )
}
export default Login

Y luego creamos las demás paginas para agregarles la función lazy

const Profile = lazy(() => import('./pages/Profile'));
const About   = lazy(() => import('./pages/About'  ));
const Contact = lazy(() => import('./pages/Contact'));
const FAQs    = lazy(() => import('./pages/FAQs'   ));
const Login   = lazy(() => import('./pages/Login'  ));

Ahora, vamos a comentar las importaciones para que no hagan conflicto con los nuevos componentes que creamos

// import { About, Contact, FAQs, Profile, Login } from './pages'

Pero aun falta el paso final, ya que si vemos nuestra app, nos dará un error, y eso es porque necesitamos un componente que suspenda el renderizado del componente hasta que todas sus dependencias estén cargada.

Para ello usamos el componente que nos proporciona React.

import { lazy, Suspense } from 'react';

<Route 
    path='login' 
    element={
        <Suspense> 
            <Login />
        </Suspense>
    } 
/>

Suspense, ademas nos sirve como interfaz de usuario, ya que contiene una prop fallback que debe recibir un componente de React, el cual se mostrara hasta que termine de cargarse el componente al que le aplicamos lazy. O sea que aquí es un buen lugar para poner un componente loading.

import { lazy, Suspense } from 'react';

<Route 
    path='login' 
    element={
        <Suspense fallback={<>Loading app...</>}> 
            <Login />
        </Suspense>
    } 
/>

Tendrás que agregar el Suspense a cada pagina que le has aplicado la función lazy. Y el archivo quedaría de esta manera.

import { lazy, Suspense } from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { NavBar } from './components/NavBar';
// import { About, Contact, FAQs, Profile, Login } from './pages'

const Profile = lazy(() => import('./pages/Profile'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
const FAQs = lazy(() => import('./pages/FAQs'));
const Login = lazy(() => import('./pages/Login'));

const isAuthenticated = false

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {
          (isAuthenticated)
            ? <Route path="/*" element={<PrivateRoutes />} />
            : <Route path="/*" element={<PublicRoutes />} />
        }
      </Routes>
    </BrowserRouter>
  )
}
export default App

export const PublicRoutes = () => {
  return (
    <Routes>
      <Route path='login' element={<Suspense fallback={<>...</>}> <Login /></Suspense>} />
      <Route path='/*' element={<Navigate to='/login' replace />} />
    </Routes>
  )
}

export const PrivateRoutes = () => {
  return (
    <>
      <NavBar />
      <Routes>
        <Route path='profile' element={<Suspense fallback={<>...</>}> <Profile /></Suspense>} />
        <Route path='about' element={<Suspense fallback={<>...</>}> <About /></Suspense>} />
        <Route path='contact' element={<Suspense fallback={<>...</>}> <Contact /></Suspense>} />
        <Route path='faqs' element={<Suspense fallback={<>...</>}> <FAQs /></Suspense>} />
        <Route path='/*' element={<Navigate to='/profile' replace />} />
      </Routes>
    </>
  )
}

Incluso puedes crear una lista con las rutas y recorrerla con un .map para evitar tener que colocar el Suspense demasiado.

Pero si ahora vamos y observamos nuevamente la pestaña Network. La verdad no observaremos una gran diferencia en la velocidad de carga, porque es una app muy pequeña.

Pero ahora, cambia la autenticación a true, para que se renderize la parte privada de las rutas.

const isAuthenticated = true

Pon atención a los archivos de JS, veras que no todos se cargan solamente el de Profile.tsx porque es la pagina que estas viendo actualmente.

Si te empiezas a mover entre paginas con el Navbar, veras como se van cargando cada pagina que visitas, o sea que solo se cargan hasta que tu las necesitas.

Asi es como aplicaríamos code splitting para mejorar el rendimiento de nuestras aplicaciones en React.

Tampoco te digo que uses lazy en todos los componentes, porque puede provocar tiempos de cargas mas largos. Intenta cargar sólo componentes que no sean visibles en el renderizado inicial.

💢 Conclusión.

El code splitting es una práctica común en las grandes aplicaciones React, y el aumento de velocidad que proporciona puede determinar si un usuario continúa usando una aplicación web o la abandona, por lo que recortar incluso fracciones de segundo podría ser significativo.

Espero haberte ayudado a entender un poco mas este tema. Si conoces alguna otra forma distinta o mejor de realizar esta aplicación con gusto puedes comentarla. 🙌

Te invito a que revises mi portafolio en caso de que estés interesado en contactarme para algún proyecto! Franklin Martinez Lucas

🔵 No olvides seguirme también en twitter: @Frankomtz361

Code splitting in React JS

Franklin Martinez — Fri, 03 Mar 2023 14:25:34 +0000

When your applications grow, it would be considerable to improve the initial loading speed to make it smaller, and thus avoid the user to leave our app because of having to wait for it to load.

And for that, we can use code splitting, which will help us a lot in our applications.

Note: To understand this post, you must have react router dom bases, because we are going to use a library that we are going to use to explain the code splitting.

Table of contents.

📌 Technologies to be used

📌 What is code splitting?

📌 Creating the project.

📌 First steps.

📌 Applying code splitting.

📌 Conclusion.

💢 Technologies to be used.

React JS v18.2.0
React router dom v6.7.0
Vite JS v4.0.0
TypeScript v4.9.3

💢 What is code splitting?

First you need to understand how most frameworks work.
Since many bundle all dependencies into one large file, which makes it easy to add JavaScript to an HTML page.
In theory, bundling JavaScript in this way should speed up page loading and reduce the amount of traffic pages have to handle.

But as an application grows, the size of its bundles also grows and, at some point, its bundles will be so large that they will take a long time to load.

This is where the code splitting technique comes in. Code splitting consists of separating the code into several packages or components that can be loaded on demand or in parallel. This means that they are not loaded until they are needed.

The page still loads the same amount of code, but the difference is because the page may not execute all the code it loads.

The benefits of code splitting are:

The speed at which a website loads and displays content becomes faster.
The interaction time improves.
The percentage of users who abandon the web page without interacting with it decreases.

💢 Creating the project.

We will name the project: code-splitting-react (optional, you can name it whatever you like).

npm create vite@latest

We create the project with Vite JS and select React with TypeScript.

Then we run the following command to navigate to the directory just created.

cd code-splitting-react

Then we install the dependencies.

npm install

Then we open the project in a code editor (in my case VS code).

code .

💢 First steps.

First we are going to create a few pages. We create the folder src/pages and inside we create 6 files. Which will be very simple with very little content.

Notice that the only thing that I place is a div with the name corresponding to the page.

1- Profile.tsx

export const Profile = () => {
    return (
        <div>Profile</div>
    )
}

Well we do the same with the following 4 pages

2- About.tsx
3- Contact.tsx
4- FAQs.tsx
5- Login.tsx

In this file we will only export each page, that is, we will use it as a barrel file.

6- index.ts

export * from './About';
export * from './Contact';
export * from './FAQs';
export * from './Login';
export * from './Profile';

Now let's create an example of how we would normally create an app with routes without applying code splitting.

We install react router dom

npm install react-router-dom

Create a folder src/components and create a file NavBar.tsx.

import { Link } from 'react-router-dom';

export const NavBar = () => {
    return (
        <nav>
            <Link to='/home'>Home</Link>
            <Link to='/about'>About</Link>
            <Link to='/contact'>Contact</Link>
            <Link to='/faqs'>FAQs</Link>
        </nav>
    )
}

And now inside the src/App.tsx file we delete all its content and create a new component.

import { BrowserRouter, Navigate } from 'react-router-dom';
import { NavBar } from './components/NavBar';
import { About, Contact, FAQs, Profile, Login } from './pages'

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='profile' element={ <Profile /> } />
        <Route path='contact' element={ <Contact /> } />
        <Route path='about' element={ <About /> } />
        <Route path='faqs' element={ <FAQs /> } />
        <Route path='login' element={ <Login /> } />

        <Route path='/*' element={<Navigate to='/login' replace />} />
      </Routes>
    </BrowserRouter>
  )
}
export default App

Now we are going to modify a little, to simulate the private routes. So in the same file we create 2 new components.

In this component we are going to have these routes, that will be the private ones, that is to say that the user will see them until he is authenticated.
Also note that here we are going to show the .

export const PrivateRoutes = () => {
  return (
    <>
      <NavBar />
      <Routes>
        <Route path='profile' element={ <Profile /> } />
        <Route path='about'   element={ <About />   } />
        <Route path='contact' element={ <Contact /> } />
        <Route path='faqs'    element={ <FAQs />    } />

        <Route path='/*'      element={<Navigate to='/profile' replace />} />
      </Routes>
    </>
  )
}

Then there are the public roads.


export const PublicRoutes = () => {
  return (
    <Routes>
      <Route path='login' element={ <Login /> } />

      <Route path='/*' element={<Navigate to='/login' replace />} />
    </Routes>
  )
}

Finally we modify the App component.
We create a constant to simulate the authentication.
And depending on that constant we will create one route or another.

const isAuthenticated = false

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {
          (isAuthenticated)
            ? <Route path="/*" element={<PrivateRoutes />} />
            : <Route path="/*" element={<PublicRoutes />} />
        }
      </Routes>
    </BrowserRouter>
  )
}
export default App

Maybe you think that because we only render some routes and not others, the routes that are not rendered will not be loaded. But the truth is that even if it is not rendered, either the public or private route on the screen, all the components, all the pages and their css and other packages will always be loaded.

And you can check it if you run the app, and you go to inspect the page in the Network tab and filter it by JS files, you will see how all the pages are loaded, Login.tsx, Profile.tsx, About.tsx, etc.

Maybe now you will not notice any problem in the loading speed, because this app has almost no content. But if you imagine that you have more components or more packages installed, your application would load everything even if you are not using it.

So let's try to solve this problem with code splitting.

💢 Applying code splitting.

At this moment we have an "authentication" that will allow us or not to see the private pages.
But previously we saw that even if you are authenticated or not, the pages will always load.

So, what if the user just wants to login and that's it, then there is no need to load the other pages that are private. Or what if the user is already authenticated, there is no need to load the login, until the user decides to log out.

Well to apply code splitting, let's use:

React.lazy. Feature provided directly by React, allows lazy loading of imports. It is a component function, which takes as a parameter another one and finally returns a promise as a result that is expected to be resolved by a React component.

const Login = lazy(() => import('./pages/Login'));

But, you might get an error, because the lazy function expects the component you want it to return to be a default export.

So we just go to each page, and add its default export.

Take pages/Login.tsx as an example. We'll do the same for all the pages.

const Login = () => {
    return (
        <div>Login</div>
    )
}
export default Login

And then we create the other pages to add the lazy function to them.

const Profile = lazy(() => import('./pages/Profile'));
const About   = lazy(() => import('./pages/About'  ));
const Contact = lazy(() => import('./pages/Contact'));
const FAQs    = lazy(() => import('./pages/FAQs'   ));
const Login   = lazy(() => import('./pages/Login'  ));

Now, let's discuss the imports so that they do not conflict with the new components that we create

// import { About, Contact, FAQs, Profile, Login } from './pages'

But the final step is still missing, because if we see our app, it will give us an error, and that's because we need a component that suspends the rendering of the component until all its dependencies are loaded.

For it we use the component that React provides us.

import { lazy, Suspense } from 'react';

<Route 
    path='login' 
    element={
        <Suspense> 
            <Login />
        </Suspense>
    } 
/>

Suspense, also serves as a user interface, since it contains a prop fallback that must receive a React component, which will be displayed until the component to which we apply lazy has finished loading. So this is a good place to put a loading component.

import { lazy, Suspense } from 'react';

<Route 
    path='login' 
    element={
        <Suspense fallback={<>Loading app...</>}> 
            <Login />
        </Suspense>
    } 
/>

You will have to add the Suspense to each page that you have applied the lazy function to. And the file would look like this.

import { lazy, Suspense } from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { NavBar } from './components/NavBar';
// import { About, Contact, FAQs, Profile, Login } from './pages'

const Profile = lazy(() => import('./pages/Profile'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
const FAQs = lazy(() => import('./pages/FAQs'));
const Login = lazy(() => import('./pages/Login'));

const isAuthenticated = false

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {
          (isAuthenticated)
            ? <Route path="/*" element={<PrivateRoutes />} />
            : <Route path="/*" element={<PublicRoutes />} />
        }
      </Routes>
    </BrowserRouter>
  )
}
export default App

export const PublicRoutes = () => {
  return (
    <Routes>
      <Route path='login' element={<Suspense fallback={<>...</>}> <Login /></Suspense>} />
      <Route path='/*' element={<Navigate to='/login' replace />} />
    </Routes>
  )
}

export const PrivateRoutes = () => {
  return (
    <>
      <NavBar />
      <Routes>
        <Route path='profile' element={<Suspense fallback={<>...</>}> <Profile /></Suspense>} />
        <Route path='about' element={<Suspense fallback={<>...</>}> <About /></Suspense>} />
        <Route path='contact' element={<Suspense fallback={<>...</>}> <Contact /></Suspense>} />
        <Route path='faqs' element={<Suspense fallback={<>...</>}> <FAQs /></Suspense>} />
        <Route path='/*' element={<Navigate to='/profile' replace />} />
      </Routes>
    </>
  )
}

You can even create a list with the routes and go through it with a .map to avoid having to place the Suspense too much.

But if we now go and look again at the Network tab. The truth is that we will not see a big difference in the loading speed, because it is a very small app.

But now, change the authentication to true, so that the private part of the routes is rendered.

const isAuthenticated = true

Pay attention to the JS files, you will see that not all of them are loaded, only the Profile.tsx because it is the page you are currently viewing.

If you start moving between pages with the Navbar, you will see how they are loaded every page you visit, so they are only loaded until you need them.

This is how we would apply code splitting to improve the performance of our React applications.

I'm not telling you to use lazy on all components either, because it can cause longer load times. Try to load only components that are not visible in the initial rendering.

💢 Conclusion.

Code splitting is a common practice in large React applications, and the speed increase it provides can determine whether a user continues to use a web application or abandons it, so trimming even fractions of a second could be significant.

I hope I have helped you understand a little more about this topic. If you know of any other different or better way to perform this application feel free to comment. 🙌

I invite you to check my portfolio in case you are interested in contacting me for a project!. Franklin Martinez Lucas

🔵 Don't forget to follow me also on twitter: @Frankomtz361

Animaciones con GSAP + React 🌟

Franklin Martinez — Fri, 24 Feb 2023 15:59:38 +0000

En esta ocasión aprenderemos como usar la librería de GSAP para realizar animaciones junto con React JS.

Nota: no es un tutorial de gsap, por lo que debes tener ciertas nociones de esta librería.

El propósito es que sepas complementar con buenas practicas las animaciones dentro del ecosistema de React JS.

Tabla de contenido.

📌 Tecnologías a utilizar.

📌 Creando el proyecto.

📌 Usando GSAP por primera vez.

📌 Conociendo gsap.context().

📌 Usando lineas de tiempo.

📌 Animar con interacciones.

📌 Evitar el flash del contenido que aun no esta estilizado.

📌 Conclusión.

☄️ Tecnologías a utilizar.

▶️ React JS (version 18)
▶️ GSAP 3
▶️ Vite JS
▶️ TypeScript
▶️ CSS vanilla (Los estilos los encuentras en el repositorio al final de este post)

☄️ Creando el proyecto.

Al proyecto le colocaremos el nombre de: gsap-react (opcional, tu le puedes poner el nombre que gustes).

npm init vite@latest

Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.

cd gsap-react

Luego instalamos las dependencias.

npm install

Después abrimos el proyecto en un editor de código (en mi caso VS code).

code .

☄️ Usando GSAP por primera vez.

Dentro del archivo src/App.tsx borramos todo y creamos un componente que muestre un div con un hello world

El componente Title no es tan importante

const App = () => {
    return (
        <>
            <Title />
            <div className="square">Hello World</div>
        </>
    )
}
export default App

Asi se vería.

Ahora instalemos GSAP.

npm install gsap

Para usar gsap y animar algún elemento podemos hacerlo de la siguiente manera...

Primero importamos gsap.

Luego, gsap tiene varias funciones para realizar animaciones.

-to: comenzará en el estado actual del elemento y animará "hacia" los valores definidos en la interpolación.
-from: es como un .to() al revés, que anima "desde" los valores definidos en la interpolación y termina en el estado actual del elemento.
-fromTo: Se definen los valores iniciales y finales.
-set: establece inmediatamente las propiedades (sin animación).

En este caso usaremos el más común que es la función to, ya que todas las funciones se usan de la misma manera con dos parámetros (a excepción del fromTo que recibe 3).

El primer parámetro es el elemento o elementos a animar, este parámetro puede ser un string (el id del elemento HTML o incluso hasta un selector complejo de CSS) o puede ser un elemento HTML o un array de elementos HTML.
El segundo parámetro es un objeto con las variables que quieres animar y que valor les quieres dar.

import { gsap } from "gsap";


const App = () => {

 gsap.to( ".square", { rotate: 360 })

  return (
    <>
      <div className="square">Hello World</div>
    </>
  )
}
export default App

Pero detente, esto que acabas de ver, es una mala practica en React JS 😞...

Primero, los efectos secundarios como las animaciones, deben ser ejecutadas dentro del hook useEffect como buena practica y asi evitar comportamientos no esperados.

Segundo, nota que el primer parámetro colocamos ".square", lo cual no esta mal, incluso funcionaria pero, React nos recomienda el no acceder a elementos del DOM de esa manera, para eso usaríamos otro hook, que es el useRef.

Entonces asi quedaría el código de nuestra primera animación, cuando la app comience, se ejecutara la animación que debería rotar en 360 grados el div con el Hello World.

import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);


  useEffect(() => {

    gsap.to(app.current, { rotate: 360, duration: 5 })

  }, [])

  return (
    <>
      <div ref={app}>Hello World</div>
    </>
  )
}
export default App

☄️ Conociendo gsap.context().

Bueno ya vimos como hacer una animación, usando las buenas practicas. Pero que tal si queremos hacer otras animaciones a distintos elementos, ¿tenemos que crear mas referencias?. Pues no es necesario, gracias a gsap.context.

Básicamente, solo creas una referencia, que actuara como padre, conteniendo los elementos que quieras animar.

La función gsap.context tiene dos parámetros.

Un callback, donde básicamente realizaras las animaciones, (ten en cuanta que solo seleccionaras los elementos descendientes).
El elemento que actuara como contenedor.

Pero ahora vamos paso a paso:

1 - Tenemos definido este componente

const App = () => {

  return (
    <div>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

2 - Creamos una nueva referencia hacia el elemento padre que encierra todos los demás elementos.

import { useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

3 - Creamos un efecto.

import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {


  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

4 - Dentro del efecto, creamos una nueva variable, a la cual le asignaremos la función context de gsap. Esto es porque al final necesitaremos limpiar las animaciones y que no se sigan ejecutando, por eso crearemos la variable ctx que usaremos mas adelante.

import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {

    let ctx = gsap.context()

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

5 - La función context recibe dos parámetros, el callback (donde estableceremos las demás animaciones), y el elemento (este elemento debe contener elementos descendientes).

Nota que el segundo parámetro le estamos pasando toda la referencia como tal, No le pasamos el app.current

De una vez ejecutamos la función de limpieza del useEffect. y usamos la variable ctx que declaramos anteriormente y ejecutamos el método revert() para limpiar las animaciones y que no se ejecuten

import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {

    let ctx = gsap.context(() => {}, app);

    return () => ctx.revert();

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

6 - Ahora si, podemos realizar las animaciones dentro del callback definido en método context

Realizamos una animación como te lo mostré anteriormente

Si notas la animación dentro de callback del context, es algo contradictorio a las buenas practicas que mencione antes, ya que volvemos obtener el elemento mediante su clase. 🤔

Pero la ventaja es que no tendrás que crear una referencia por cada elemento que quieras animar 😉

import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {

    let ctx = gsap.context(() => {

      gsap.to(".square", { rotate: 360, duration: 5 });
      //gsap.to(".square2", { rotate: 360, duration: 5 });
      //gsap.to(".square3", { rotate: 360, duration: 5 });

    }, app);

    return () => ctx.revert();

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

Nota que si tu quieres animar un elemento (.square2) que no es descendiente del elemento padre que tiene la referencia, no podrás animarlo en el context, al menos que muevas dicho elemento dentro del elemento con la referencia para que se convierta en un elemento hijo.

El elemento con la clase .square2 no se animara porque no es un elemento hijo del elemento que tiene la ref

useEffect(() => {

let ctx = gsap.context(() => {

    gsap.to(".square", { rotate: 360, duration: 5 });

    gsap.to(".square2", { rotate: 360, duration: 5 }); // Don't work ❌

}, app);

return () => ctx.revert();

}, [])

<div ref={app}>
    <div className="square">Hello World</div>
</div>

<div className="square2">Hello World</div>

☄️ Usando lineas de tiempo.

Las lineas de tiempo nos ayudaran a crear animaciones en secuencia.

Y para crear una linea de tiempo, lo haremos de la siguiente manera.

Tenemos prácticamente todo el código anterior, donde usamos la función context de gsap.
Solamente que el callback por el momento esta vació, y agregamos un nuevo elemento div con la clase square2 y dentro un Hello World 2

import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {

    let ctx = gsap.context(() => {}, app);

    return () => ctx.revert();

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
      <div className="square2">Hello World 2</div>
    </div>
  )
}
export default App

Para crear la linea del tiempo, usaremos una nueva referencia.

  const tl = useRef<GSAPTimeline>()

Ahora dentro del callback del context, a la ref tl le asignaremos la función timeline de gsap.

Esto nos servirá para evitar crear una nueva linea de tiempo cada vez que se renderize el componente.

let ctx = gsap.context(() => {

    tl.current = gsap.timeline()

}, app);

Entonces, para agregar una animación a un elemento, solamente ejecutamos el tipo de animación con sus parámetros requeridos.

De la siguiente manera:

let ctx = gsap.context(() => {

    tl.current = gsap.timeline().to(".square", { rotate: 360 }).to(".square2", { x: 200});

}, app);

Para una mejor lectura de código podemos colocar el código asi:

let ctx = gsap.context(() => {

    tl.current = gsap.timeline()
      .to(".square", { rotate: 360 })
      .to(".square2", { x: 200 })

}, app);

Esto significa que primero se ejecuta la animación al elemento con la clase .square y hasta que esta animación termine se ejecutara la siguiente animación que es para el elemento con la clase .square2.

Claro que la duración de la animación puede configurarse para que se ejecuten al mismo tiempo o algo por el estilo.

El código quedaría asi:

import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);
  const tl = useRef<GSAPTimeline>()

  useEffect(() => {

    let ctx = gsap.context(() => {

      tl.current = gsap.timeline()
        .to(".square", { rotate: 360 })
        .to(".square2", { x: 200 });

    }, app);

    return () => ctx.revert()

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
      <div className="square2">Hello World 2</div>
    </div>
  )
}
export default App

☄️ Animar con interacciones.

También puedes ejecutar las animaciones mediante interacciones que se hagan con los elementos, no solamente al iniciar tu aplicación y en el useEffect.

Por ejemplo, mediante el evento click a un elemento puedes disparar alguna animación.

Nota que la función handleClick recibe el evento. Por lo cual tendremos acceso al elemento que le estamos dando click.

Y ese elemento (e.target) es lo que le pasaremos a la animación "to" de gsap

import { gsap } from "gsap";

const App = () => {

  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

    gsap.to(e.target, { rotation: '50', yoyo: true, repeat: 1 })
  }

  return (
    <>
      <div onClick={handleClick} >Hello World</div>
    </>
  )
}
export default App

No solamente lo puedes hacer con un evento click, también con otros diversos eventos como onMouseEnter u onMouseLeave

import { gsap } from "gsap";

const App = () => {

  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    gsap.to(e.target, { rotation: '50', yoyo: true, repeat: 1 })
  }

  const onEnter = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    gsap.to(e.target, { scale: 1.2 });
  };

  const onLeave = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    gsap.to(e.target, { scale: 1 });
  };

  return (
    <>
      <div 
        onMouseEnter={onEnter} 
        onMouseLeave={onLeave} 
        onClick={handleClick}

      >Hello World</div>
    </>
  )
}
export default App

☄️ Evitar el flash del contenido que aun no esta estilizado.

Seguramente haz notado que al iniciar la aplicación y debes ejecutar una animación al inicio, notas un pequeño destello del contenido que quieres animar pero sin estilos css, después de eso ya se ejecuta la animación correspondiente.

A lo largo de este trayecto has visto que usamos useEffect para ejecutar las animaciones cuando inicia la aplicación. Pero useEffect se ejecuta después de que se haya pintado el DOM y es por eso que ocurre ese pequeño destello no deseado.

Para evitar ese destello, en vez de usar useEffect usaremos useLayoutEffect el cual funciona exactamente igual que useEffect pero la diferencia es que el useLayoutEffect se ejecuta antes de que se pinte el DOM.

Este es un ejemplo tomado de la documentación de gsap, y es exactamente lo que queremos evitar.

Lo evitamos usando useLayoutEffect

import { gsap } from "gsap";
import { useLayoutEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {

    let ctx = gsap.context(() => {

      gsap.to(".square", { rotate: 360, duration: 5 });

    }, app);

    return () => ctx.revert();

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

☄️ Conclusión.

La librería de GSAP, sin duda es muy interesante, por lo que espero haberte ayudado a entender como se usa con React JS siguiendo buenas practicas y consejos. 🙌

Por cierto otro consejo seria que no animaras todo. También solo deberías animar propiedades como las transformaciones u opacidad y evita animar las propiedades como filter o boxShadow ya que consumen mucha CPU en los navegadores.

Asegúrate que las animaciones funcionen en dispositivos de gama baja.

Si conoces alguna otra forma distinta o mejor de realizar animaciones con esta librería u otra, con gusto puedes comentarla.

Te invito a que revises mi portafolio en caso de que estés interesado en contactarme para algún proyecto! Franklin Martinez Lucas

🔵 No olvides seguirme también en twitter: @Frankomtz361

// Detect dark theme var iframe = document.getElementById('tweet-1575329958674796547-869'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1575329958674796547&theme=dark" }

Animations with GSAP + React 🌟

Franklin Martinez — Fri, 24 Feb 2023 15:59:33 +0000

This time we will learn how to use the GSAP library to make animations together with React JS.

Note: this is not a gsap tutorial, so you must have some notions of this library.

The purpose is that you know how to complement with good practices the animations within the React JS ecosystem.

Table of contents.

📌 Technologies to be used.

📌 Creating the project.

📌 Using GSAP for the first time.

📌 Getting to know gsap.context().

📌 Using Timelines.

📌 Animating with interactions.

📌 Avoiding flash of content that is not yet styled.

📌 Conclusion.

☄️ Technologies to be used.

▶️ React JS (v.18)
▶️ GSAP 3
▶️ Vite JS
▶️ TypeScript
▶️ CSS vanilla (You can find the styles in the repository at the end of this post)

☄️ Creating the project.

We will name the project: gsap-react (optional, you can name it whatever you like).



npm init vite@latest

We create the project with Vite JS and select React with TypeScript.

Then we run the following command to navigate to the directory just created.



cd gsap-react

Then we install the dependencies.



npm install

Then we open the project in a code editor (in my case VS code).



code .

☄️ Using GSAP for the first time.

Inside the src/App.tsx file we delete everything and create a component that displays a div with a hello world.

The Title component is not so important.



const App = () => {
    return (
        <>
            <Title />
            <div className="square">Hello World</div>
        </>
    )
}
export default App

This is what it would look like.

Now let's install GSAP.



npm install gsap

To use gsap and animate some element we can do it in the following way...

First we import gsap.

Then, gsap has several functions to perform animations.

-to: will start at the current state of the element and animate "towards" the values defined in the interpolation.
-from: is like a reverse .to(), which animates "from" the values defined in the interpolation and ends at the current state of the element.
-fromTo: initial and final values are defined.
-set*: immediately sets the properties (without animation).

In this case we will use the most common one which is the to function, since all functions are used in the same way with two parameters (except fromTo which receives 3).

The first parameter is the element or elements to animate, this parameter can be a string (the id of the HTML element or even a complex CSS selector) or it can be an HTML element or an array of HTML elements.
The second parameter is an object with the variables that you want to animate and what value you want to give them.



import { gsap } from "gsap";


const App = () => {

 gsap.to( ".square", { rotate: 360 })

  return (
    <>
      <div className="square">Hello World</div>
    </>
  )
}
export default App

But stop, this you just saw, is a bad practice in React JS 😞....

First, side effects like animations should be executed inside the useEffect hook as a good practice to avoid unexpected behavior.

Second, note that the first parameter we put ".square", which is not bad, it would even work but, React recommends us not to access DOM elements in that way, for that we would use another hook, which is the useRef.

Then this would be the code of our first animation, when the app starts, the animation will be executed and it should rotate in 360 degrees the div with the Hello World.



import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);


  useEffect(() => {

    gsap.to(app.current, { rotate: 360, duration: 5 })

  }, [])

  return (
    <>
      <div ref={app}>Hello World</div>
    </>
  )
}
export default App

☄️ Getting to know gsap.context().

Well, we already saw how to make an animation, using the good practices. But what if we want to make other animations to different elements, do we have to create more references? Well it is not necessary, thanks to gsap.context.

Basically, you just create a reference, which will act as a parent, containing the elements you want to animate.

The function gsap.context has two parameters.

A callback, where you will basically perform the animations, (keep in mind that you will only select the descendant elements).
The element that will act as container.

But now let's go step by step:

1 - We have defined this component



const App = () => {

  return (
    <div>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

2 - We create a new reference to the parent element that encloses all the other elements.



import { useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

3 - Create an effect.



import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {


  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

4 - Inside the effect, we create a new variable, to which we will assign the context function of gsap. This is because at the end we will need to clean the animations and that they do not continue executing, for that reason we will create the variable ctx that we will use later.



import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {

    let ctx = gsap.context()

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

5 - The context function receives two parameters, the callback (where we will set the other animations), and the element (this element must contain descendant elements).

Note that the second parameter we are passing all the reference as such, We do not pass the app.current.

At once we execute the useEffect cleanup function. and we use the variable ctx that we declared previously and we execute the method revert() to clean up the animations so that they are not executed.



import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {

    let ctx = gsap.context(() => {}, app);

    return () => ctx.revert();

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

6 - Now we can perform the animations inside the callback defined in the context method.

Let's make an animation as I showed you before

If you notice the animation inside the context callback, it is somewhat contradictory to the best practices I mentioned before, since we get the element back through its class. 🤔

But the advantage is that you won't have to create a reference for each element you want to animate 😉



import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {

    let ctx = gsap.context(() => {

      gsap.to(".square", { rotate: 360, duration: 5 });
      //gsap.to(".square2", { rotate: 360, duration: 5 });
      //gsap.to(".square3", { rotate: 360, duration: 5 });

    }, app);

    return () => ctx.revert();

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

Note that if you want to animate an element (.square2) that is not a descendant of the referenced parent element, you will not be able to animate it in the context, unless you move the element into the referenced element so that it becomes a child element.

The element with the .square2 class will not animate because it is not a child element of the element that has the ref.



useEffect(() => {

let ctx = gsap.context(() => {

    gsap.to(".square", { rotate: 360, duration: 5 });

    gsap.to(".square2", { rotate: 360, duration: 5 }); // Don't work ❌

}, app);

return () => ctx.revert();

}, [])

<div ref={app}>
    <div className="square">Hello World</div>
</div>

<div className="square2">Hello World</div>

☄️ Using Timelines.

Timelines will help us to create animations in sequence.

And to create a timeline, we will do it in the following way.

We have practically all the previous code, where we use the context function of gsap.
Only that the callback for the moment is empty, and we add a new div element with the class square2 and inside a "Hello World 2".



import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useEffect(() => {

    let ctx = gsap.context(() => {}, app);

    return () => ctx.revert();

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
      <div className="square2">Hello World 2</div>
    </div>
  )
}
export default App

To create the timeline, we will use a new reference.



  const tl = useRef<GSAPTimeline>()

Now inside the callback of the context, to the ref tl we will assign the function timeline of gsap.

This will help us to avoid creating a new timeline each time the component is rendered.



let ctx = gsap.context(() => {

    tl.current = gsap.timeline()

}, app);

So, to add an animation to an element, we just execute the animation type with its required parameters.

As follows:



let ctx = gsap.context(() => {

    tl.current = gsap.timeline().to(".square", { rotate: 360 }).to(".square2", { x: 200});

}, app);

For a better code reading we can place the code like this:



let ctx = gsap.context(() => {

    tl.current = gsap.timeline()
      .to(".square", { rotate: 360 })
      .to(".square2", { x: 200 })

}, app);

This means that first the animation is executed to the element with the class .square and until this animation finishes the next animation will be executed which is for the element with the class .square2.

Of course, the duration of the animation can be configured so that they are executed at the same time or something like that.

The code would look like this:



import { gsap } from "gsap";
import { useEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);
  const tl = useRef<GSAPTimeline>()

  useEffect(() => {

    let ctx = gsap.context(() => {

      tl.current = gsap.timeline()
        .to(".square", { rotate: 360 })
        .to(".square2", { x: 200 });

    }, app);

    return () => ctx.revert()

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
      <div className="square2">Hello World 2</div>
    </div>
  )
}
export default App

☄️ Animating with interactions.

You can also execute the animations through interactions that are made with the elements, not only when starting your application and in the useEffect.

For example, by means of the event click to an element you can trigger some animation.

Note that the function handleClick receives the event. For which we will have access to the element that we are giving click.

And that element (e.target) is what we will pass to the animation "to " of gsap.



import { gsap } from "gsap";

const App = () => {

  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

    gsap.to(e.target, { rotation: '50', yoyo: true, repeat: 1 })
  }

  return (
    <>
      <div onClick={handleClick} >Hello World</div>
    </>
  )
}
export default App

You can do this not only with a click event, but also with several other events such as onMouseEnter or onMouseLeave.



import { gsap } from "gsap";

const App = () => {

  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    gsap.to(e.target, { rotation: '50', yoyo: true, repeat: 1 })
  }

  const onEnter = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    gsap.to(e.target, { scale: 1.2 });
  };

  const onLeave = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    gsap.to(e.target, { scale: 1 });
  };

  return (
    <>
      <div 
        onMouseEnter={onEnter} 
        onMouseLeave={onLeave} 
        onClick={handleClick}

      >Hello World</div>
    </>
  )
}
export default App

☄️ Avoiding flash of content that is not yet styled.

Surely you have noticed that when you start the application and you must execute an animation at the beginning, you notice a small flash of the content that you want to animate but without css styles, after that the corresponding animation is already executed.

Along this path you have seen that we use useEffect to execute the animations when the application starts. But useEffect is executed after the DOM has been painted and that's why that little unwanted flash occurs.

To avoid that flash, instead of using useEffect we will use useLayoutEffect which works exactly the same as useEffect but the difference is that the useLayoutEffect is executed before the DOM is painted.

This is an example taken from the gsap documentation, and is exactly what we want to avoid.

We avoid this by using useLayoutEffect



import { gsap } from "gsap";
import { useLayoutEffect, useRef } from "react";

const App = () => {

  const app = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {

    let ctx = gsap.context(() => {

      gsap.to(".square", { rotate: 360, duration: 5 });

    }, app);

    return () => ctx.revert();

  }, [])


  return (
    <div ref={app}>
      <div className="square">Hello World</div>
    </div>
  )
}
export default App

☄️ Conclusion.

The GSAP library is certainly very interesting, so I hope I have helped you to understand how to use it with React JS following good practices and tips. 🙌

By the way another tip would be to not animate everything. Also you should only animate properties like transformations or opacity and avoid animating properties like filter or boxShadow as they consume a lot of CPU in the browsers.

Make sure the animations work on low end devices.

If you know any other different or better way to make animations with this library or another, feel free to comment it.

I invite you to check my portfolio in case you are interested in contacting me for a project!. Franklin Martinez Lucas

🔵 Don't forget to follow me also on twitter: @Frankomtz361

// Detect dark theme var iframe = document.getElementById('tweet-1575330172819193857-873'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1575330172819193857&theme=dark" }

Building a multi-language app with React JS 🌐

Franklin Martinez — Fri, 17 Feb 2023 14:02:08 +0000

Nowadays, creating an app that supports multiple languages is becoming more and more indispensable to reach a wide range of users. So this time, with the help of React we are going to build it.

Table of contents.

📌 Technologies to be used.

📌 Creating the project.

📌 First steps.

📌 Configuring i18n.

📌 Using useTranslation.

📌 Moving translations to separate files.

📌 Conclusion.

📌 Demo.

📌 Source Code.

🈵 Technologies to be used.

▶️ React JS 18.2.0
▶️ i18next 22.4.9
▶️ Vite JS 4.0.0
▶️ TypeScript 4.9.3
▶️ CSS vanilla (You can find the styles in the repository at the end of this post)

🈵 Creating the project.

We will name the project: multi-lang-app (optional, you can name it whatever you like).

npm init vite@latest

We create the project with Vite JS and select React with TypeScript.

Then we run the following command to navigate to the directory just created.

cd multi-lang-app

Then we install the dependencies.

npm install

Then we open the project in a code editor (in my case VS code).

code .

🈵 First steps.

First we are going to install a library to be able to create routes in our app. In this case we will use react-router-dom.

npm install react-router-dom

Create a folder src/pages and inside create 2 files that will be our pages and will be very simple

Home.tsx

export const Home = () => {
  return (
    <main>
      <h1>Multi-language app</h1>
      <span>Select another language!</span>
    </main>
  );
};

About.tsx

export const About = () => {
  return (
    <main>
      <h1>About</h1>
    </main>
  );
};

We will also create a simple Menu component so that you can move between paths and change the language from any path.

But first, let's define the languages to use, in a separate file. In my case I will create them in a folder src/constants we create a file index.ts and add:

export const LANGUAGES = [
  { label: "Spanish", code: "es" },
  { label: "English", code: "en" },
  { label: "Italian", code: "it" },
];

Now we create a folder src/components and inside the file Menu.tsx and add the following:

import { NavLink } from "react-router-dom";
import { LANGUAGES } from "../constants";

const isActive = ({ isActive }: any) => `link ${isActive ? "active" : ""}`;

export const Menu = () => {
  return (
    <nav>
      <div>
        <NavLink className={isActive} to="/">
          Home
        </NavLink>
        <NavLink className={isActive} to="/about">
          About
        </NavLink>
      </div>

      <select defaultValue={"es"}>
        {LANGUAGES.map(({ code, label }) => (
          <option key={code} value={code}>
            {label}
          </option>
        ))}
      </select>
    </nav>
  );
};

Finally we will create our router in the src/App.tsx file, adding the pages and the Menu component.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Menu } from "./components/Menu";
import { About } from "./pages/About";
import { Home } from "./pages/Home";

const App = () => {
  return (
    <BrowserRouter>
      <Menu />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};
export default App;

And that's it, we have a simple two-route application.

🈵 Configuring i18n.

First we are going to install these dependencies.

npm install i18next react-i18next

react-i18next is the package that will help us to translate our pages in a React project in an easier way, but for that you need another package which is i18next to make the internationalization configuration.

So basically, i18next is the ecosystem itself, and react-i18next is the plugin to complement it.

Now let's create a new file named i18n.ts we will create it inside the src folder (src/i18n.ts).
Inside we are going to import the i18next package and we are going to access the use method because we are going to load the initReactI18next plugin to use the internationalization with React easier.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next);

export default i18n;

Now we will access its init method to add a configuration object.

lng: Default language.
fallbackLng: Language that will be loaded in case the translations the user is looking for are not available.
resources: an object with the translations to be used in the application.
interpolation.escapeValue: used to escape the values and avoid XSS attacks, we will set it to false, because React already does it by default.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18.use(initReactI18next).init({
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false,
  },
  resources: {},
});

export default i18n;

In the resources part, it has to be created as follows:

The key of the object must be the language code, in this case "en " of "English " and then inside an object translation that inside will come all the translations, identified by key-value.

And it is important, keep the same name of the key of the objects, the only thing that changes is its value. Note how in both translation objects, inside they have the same title key.

resources:{
    en: {
        translation: {
            title: 'Multi-language app',
        }
    },
    es: {
        translation: {
            title: 'Aplicación en varios idiomas',
        }
    },
}

This is what our file will look like once the translations have been added.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n
  .use(i18nBackend)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    lng: getCurrentLang(),
    interpolation: {
      escapeValue: false,
    },
    resources: {
      en: {
        translation: {
          title: "Multi-language app",
          label: "Select another language!",
          about: "About",
          home: "Home",
        },
      },
      es: {
        translation: {
          title: "Aplicación en varios idiomas",
          label: "Selecciona otro lenguaje!",
          about: "Sobre mí",
          home: "Inicio",
        },
      },
      it: {
        translation: {
          title: "Applicazione multilingue",
          label: "Selezionare un'altra lingua ",
          about: "Su di me",
          home: "Casa",
        },
      },
    },
  });

export default i18n;

Finally this file will only be imported in the src/main.tsx file.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import "./i18n";

import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

🈵 Using useTranslation.

Well now that we finished the i18n configuration, let's use the translations we created. So, in the src/components/Menu.tsx file, we are going to use the useTranslation hook that react-i18next gives us.

We are going to use the hook that react-i18next gives us which is the useTranslation.

From this hook, we retrieve the object i18nm and the function t.

const { i18n, t } = useTranslation();

To use the translations is as follows:

By means of brackets we execute the function t that receives as parameter a string that makes reference to the key of some value that is inside the translation object that we configured previously. (Verify in your configuration of the file i18n.ts exists an object with the key home and that contains a value).

Depending on the default language you set, it will be displayed.

<NavLink className={isActive} to="/">
  {t("home")}
</NavLink>

Well, now let's switch between languages.

First a function that executes every time the select changes.
We access the value of the event.
Through the object i18n we access the method changeLanguage and we pass the value by parameter.

const onChangeLang = (e: React.ChangeEvent<HTMLSelectElement>) => {
  const lang_code = e.target.value;
  i18n.changeLanguage(lang_code);
};

Now if you switch between languages you will see how the texts of your app change.

The Menu.tsx file would look like this.

import { useTranslation } from "react-i18next";
import { NavLink } from "react-router-dom";
import { LANGUAGES } from "../constants/index";

const isActive = ({ isActive }: any) => `link ${isActive ? "active" : ""}`;

export const Menu = () => {
  const { i18n, t } = useTranslation();

  const onChangeLang = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const lang_code = e.target.value;
    i18n.changeLanguage(lang_code);
  };

  return (
    <nav>
      <div>
        <NavLink className={isActive} to="/">
          {t("home")}
        </NavLink>
        <NavLink className={isActive} to="/about">
          {t("about")}
        </NavLink>
      </div>

      <select defaultValue={i18n.language} onChange={onChangeLang}>
        {LANGUAGES.map(({ code, label }) => (
          <option key={code} value={code}>
            {label}
          </option>
        ))}
      </select>
    </nav>
  );
};

Now let's go to the other pages to add the translation to the texts.

Home.tsx

import { useTranslation } from "react-i18next";

export const Home = () => {
  const { t } = useTranslation();

  return (
    <main>
      <h1>{t("title")}</h1>
      <span>{t("label")} </span>
    </main>
  );
};

About.tsx

import { useTranslation } from "react-i18next";

export const About = () => {
  const { t } = useTranslation();

  return (
    <main>
      <h1>{t("about")}</h1>
    </main>
  );
};

Well, now let's quickly show you how to interpolate variables.

Inside the t function, the second parameter is an object, which you can specify the variable to interpolate.

Note that I add the property name. Well then this property name, I have to take it very much in account

import { useTranslation } from "react-i18next";

export const About = () => {
  const { t } = useTranslation();

  return (
    <main>
      <h1>{t("about")}</h1>
      <span>{t("user", { name: "Bruce Wayne 🦇" })}</span>
    </main>
  );
};

Now let's go to a json file (but whatever I do in one, it has to be replicated in all the translations json files).

First I add the new property user, since I didn't have it before.
Then using double brackets I add the name of the property I assigned before, which was name.

{
    "title": "Multi-language app",
    "label": "Select another language!",
    "about": "About me",
    "home": "Home",
    "user": "My name is: {{name}}"
}

And in this way we interpolate values.

🈵 Moving translations to separate files.

But what happens when the translations are too many, then your i18n.ts file will get out of control. The best thing to do is to move them to separate files.

For this we will need to install another plugin.

npm install i18next-http-backend

This plugin will load the resources from a server, so it will be on demand.

Now we are going to create inside the public folder a i18n folder (public/i18n).
And inside we are going to create .json files that will be named according to their translation, for example.
The file es.json will be for the Spanish translations, the file it.json will be only for the Italian translations, etc.
At the end we will have 3 files because in this app we only handle 3 languages.

Then, we move each translation object content from the i18n.ts file to its corresponding JSON file.
For example the en.json file.

{
    "title": "Multi-language app",
    "label": "Select another language!",
    "about": "About",
    "home": "Home"
}

Once we have done that with the 3 files, we go to the i18n.ts and we are going to modify some things.

First we are going to remove the resources property.
We are going to import the i18next-http-backend package and by means of the use method, we pass it as parameter so that it executes that plugin.

import i18n from "i18next";
import i18nBackend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";

i18n
  .use(i18nBackend)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    lng: "en",
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Finally, we need to add a new property, which is backend that receives an object, which we will access to the loadPath property.

The loadPath property, receives a function that contains the language and must return a string.
But a simpler way is to interpolate the lng variable.

This way we will have our path where the translations will be obtained, note that I am pointing to the public folder.

Now when you want to add a new language, just add the json file in the i18n folder inside public.

import i18n from "i18next";
import i18nBackend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";

i18n
  .use(i18nBackend)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    lng: "en",
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: "http://localhost:5173/i18n/{{lng}}.json",
    },
  });

export default i18n;

But there is one more step to do, if you notice in the loadedPath property, the host is http://localhost:5173 and when you upload it to production, the translations will not work, so we must validate if we are in development mode or not, in order to add the correct host.

import i18n from "i18next";
import i18nBackend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";

const getCurrentHost =
  import.meta.env.MODE === "development"
    ? "http://localhost:5173"
    : "LINK TO PROD";

i18n
  .use(i18nBackend)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    lng: "en",
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: `${getCurrentHost}/i18n/{{lng}}.json`,
    },
  });

export default i18n;

One more tip is that the translations as they are in the backend could still be loaded while the page is ready, so it is advisable to manage a Suspense in the app.

import { Suspense } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Menu } from "./components/Menu";
import { About } from "./pages/About";
import { Home } from "./pages/Home";

const App = () => {
  return (
    <Suspense fallback="loading">
      <BrowserRouter>
        <Menu />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
};
export default App;

The Suspense component pauses the app until it is ready, and in the fallback property is what is shown to the user while waiting for the application to be ready, here is a perfect place to put a loading or spinner.

You probably won't notice a considerable improvement, since ours has very few translations. But it is a good practice.

🈵 Conclusion.

Creating a multi-language app is now easier thanks to i18n and its plugins.

I hope you liked this post and I also hope I helped you to understand how to make this kind of applications in an easier way. 🙌

If you know any other different or better way to make this application you can comment all your observations and suggestions, I would appreciate it a lot.

I invite you to check my portfolio in case you are interested in contacting me for a project!. Franklin Martinez Lucas

🔵 Don't forget to follow me also on twitter: @Frankomtz361

🈵 Demo.

https://multi-lang-app-react.netlify.app/

🈵 Source code.

https://github.com/Franklin361/multi-lang-app

Construyendo una app multi-lenguaje con React. 🌐

Franklin Martinez — Fri, 17 Feb 2023 14:02:04 +0000

En la actualidad, crear una app que soporte varios idiomas se vuelve mas indispensable para llegar a un gran alcance con los usuarios. Asi que en esta ocasión, con ayuda de React vamos a construirlo.

Tabla de contenido.

📌 Tecnologías a utilizar.

📌 Creando el proyecto.

📌 Primeros pasos.

📌 Configurando i18n.

📌 Usando useTranslation.

📌 Mover las traducciones a archivos separados.

📌 Conclusión.

📌 Demostración.

📌 Código fuente.

🈵 Tecnologías a utilizar. m

▶️ React JS 18.2.0
▶️ i18next 22.4.9
▶️ Vite JS 4.0.0
▶️ TypeScript 4.9.3
▶️ CSS vanilla (Los estilos los encuentras en el repositorio al final de este post)

🈵 Creando el proyecto.

Al proyecto le colocaremos el nombre de: multi-lang-app (opcional, tu le puedes poner el nombre que gustes).

npm create vite@latest

Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.

cd multi-lang-app

Luego instalamos las dependencias.

npm install

Después abrimos el proyecto en un editor de código (en mi caso VS code).

code .

🈵 Primeros pasos.

Primero vamos a instalar una librería para poder crear rutas en nuestra app. En este caso usaremos react-router-dom

npm install react-router-dom

Creamos una carpeta src/pages y dentro creamos 2 archivos que serán nuestras paginas y serán muy sencillas

Home.tsx

export const Home = () => {

    return (
        <main>
            <h1>Multi-language app</h1>
            <span>Select another language!</span>
        </main>
    )
}

About.tsx

export const About = () => {

    return (
        <main>
            <h1>About</h1>
        </main>
    )
}

También crearemos un componente Menu sencillo para que se puedan move entre rutas y cambiar el idioma desde cualquier ruta.

Pero antes, vamos a definir los lenguajes a usar, en un archivo aparte. En mi caso los creare en una carpeta src/constants creamos un archivo index.ts y agregamos:

export const LANGUAGES = [
    { label: 'Spanish', code: 'es' },
    { label: 'English', code: 'en' },
    { label: 'Italian', code: 'it' },
]

Ahora si, creamos una carpeta src/components y dentro el archivo Menu.tsx y agregamos lo siguiente:

import { NavLink } from 'react-router-dom';
import { LANGUAGES } from '../constants';

const isActive = ({ isActive }: any) => `link ${isActive ? 'active' : ''}`

export const Menu = () => {

    return (
        <nav>
            <div>
                <NavLink className={isActive} to='/'>Home</NavLink>
                <NavLink className={isActive} to='/about'>About</NavLink>
            </div>

            <select defaultValue={'es'} >
                {
                    LANGUAGES.map(({ code, label }) => (
                        <option
                            key={code}
                            value={code}
                        >{label}</option>
                    ))
                }
            </select>
        </nav>
    )
}

Finalmente crearemos nuestro router en el archivo src/App.tsx, agregando las paginas y el componente Menu.

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { Menu } from './components/Menu';
import { About } from './pages/About';
import { Home } from './pages/Home';

const App = () => {

  return (
    <BrowserRouter>
      <Menu />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}
export default App

Y listo, ya tenemos una aplicación sencilla de dos rutas.

🈵 Configurando i18n.

Primero vamos a instalar estas dependencias.

npm install i18next react-i18next

react-i18next es el paquete que nos ayudará a traducir nuestras paginas en un proyecto de React de una forma más fácil, pero para ello necesita otro paquete que es i18next para realizar la configuración de la internacionalización

Asi que básicamente, i18next es el ecosistema en si, y react-i18next es el plugin para complementarlo.

Ahora vamos a crear un nuevo archivo nombrado i18n.ts lo crearemos en la dentro de la carpeta src (src/i18n.ts).
Dentro vamos a importar el paquete de i18next y vamos a acceder al método use porque vamos a cargar el plugin de initReactI18next para usar la internacionalización con React mas fácil.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next)

export default i18n;

Ahora accederemos a su método init para agregar un objeto de configuración.

lng: Lenguaje por defecto.
fallbackLng: Lenguaje que se cargara en caso de que las traducciones que el usuario busca no están disponibles.
resources: un objeto con las traducciones que se usaran en la aplicación.
interpolation.escapeValue: sirve para escapar los valores y evitar ataques XSS, lo pondremos en false, porque React ya lo hace por defecto.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18
    .use(initReactI18next)
    .init({
        lng: 'en',
        fallbackLng: 'en',
        interpolation:{
            escapeValue: false
        },
        resources: {}
    });

export default i18n;

En la parte de resources, tiene que crearse de la siguiente manera:

La llave del objeto debe ser el código del lenguaje, en este caso "en" de "English" y luego dentro un objeto translation que dentro vendrán todas las traducciones, identificadas por llave-valor.

Y es importante, mantener el mismo nombre de la llave de los objetos, lo único que cambia es su valor. Nota como en ambos objetos translation, dentro tienen la misma clave de title

resources:{
    en: {
        translation: {
            title: 'Multi-language app',
        }
    },
    es: {
        translation: {
            title: 'Aplicación en varios idiomas',
        }
    },
}

Asi quedaría nuestro archivo una vez agregada las traducciones.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
    .use(i18nBackend)
    .use(initReactI18next)
    .init({
        fallbackLng: 'en',
        lng: getCurrentLang(),
        interpolation:{
            escapeValue: false
        },
        resources: {
            en: {
                translation: {
                    title: 'Multi-language app',
                    label: "Select another language!",
                    about: 'About',
                    home: 'Home'
                }
            },
            es: {
                translation: {
                    title: 'Aplicación en varios idiomas',
                    label: "Selecciona otro lenguaje!",
                    about: 'Sobre mí',
                    home: 'Inicio'
                }
            },
            it: {
                translation: {
                    title: 'Applicazione multilingue',
                    label: "Selezionare un'altra lingua ",
                    about: 'Su di me',
                    home: 'Casa'
                }
            },
        }
    });

export default i18n;

Finalmente este archivo solo lo importaremos en el archivo src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import './i18n'

import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

🈵 Usando useTranslation.

Bueno ahora que terminamos la configuración de i18n, vamos a usar las traducciones que creamos. Asi que en el archivo src/components/Menu.tsx

Vamos a usar el hook que nos da react-i18next que es el useTranslation

De este hook, recuperamos el objeto i18nm y la función t

const { i18n, t } = useTranslation()

Para usar las traducciones es de la siguiente manera:

Mediante brackets ejecutamos la función t que recibe como parámetro un string que hace referencia a la llave de algún valor que esta dentro del objeto translation que configuramos anteriormente. (Verifica en tu configuración del archivo i18n.ts exista un objeto con la llave home y que contenga un valor).

Dependiendo de lenguaje por defecto que coloques, este se mostrara.

<NavLink className={isActive} to='/'>
    {t('home')}
</NavLink>

Bueno, ahora vamos a cambiar entre idiomas.

Primero una función que se ejecute cada vez que el select cambie
Accedemos al valor del evento.
Mediante el objeto i18n accedemos al método changeLanguage y le pasamos el valor por parámetro.

    const onChangeLang = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const lang_code = e.target.value
        i18n.changeLanguage(lang_code)
    }

Ahora si cambias entre idiomas veras como cambian los textos de tu app.

El archivo Menu.tsx quedaría asi.

import { useTranslation } from 'react-i18next';
import { NavLink } from 'react-router-dom';
import { LANGUAGES } from '../constants/index';

const isActive = ({ isActive }: any) => `link ${isActive ? 'active' : ''}`

export const Menu = () => {

    const { i18n, t } = useTranslation()

    const onChangeLang = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const lang_code = e.target.value
        i18n.changeLanguage(lang_code)
    }

    return (
        <nav>
            <div>
                <NavLink className={isActive} to='/'>{t('home')}</NavLink>
                <NavLink className={isActive} to='/about'>{t('about')}</NavLink>
            </div>

            <select defaultValue={i18n.language} onChange={onChangeLang}  >
                {
                    LANGUAGES.map(({ code, label }) => (
                        <option
                            key={code}
                            value={code}
                        >{label}</option>
                    ))
                }
            </select>
        </nav>
    )
}

Ahora vamos a las otras paginas para agregar la traducción a los textos.

Home.tsx

import { useTranslation } from 'react-i18next';

export const Home = () => {

    const { t } = useTranslation()

    return (
        <main>
            <h1>{t('title')}</h1>
            <span>{t('label')} </span>
        </main>
    )
}

About.tsx

import { useTranslation } from 'react-i18next';

export const About = () => {

    const { t } = useTranslation()

    return (
        <main>
            <h1>{t('about')}</h1>
        </main>
    )
}

Bueno, ahora digamos rápidamente te mostrare como interpolar variables.

Dentro de la función t, el segundo parámetro es un objeto, el cual le puedes especificar la variable a interpolar.

Nota que yo le agrego la propiedad name. Bueno entonces esta propiedad name, la tengo que tener muy en cuenta

import { useTranslation } from 'react-i18next';

export const About = () => {

    const { t } = useTranslation()

    return (
        <main>
            <h1>{t('about')}</h1>
            <span>{t('user', { name: 'Bruce Wayne 🦇' })}</span>

        </main>
    )
}

Ahora vamos a un archivo json (pero lo que sea haga en uno, se tiene que replicar en todos los archivos json de traducciones).

Primero agrego la nueva propiedad user, ya que no la tenia antes.
Luego mediante corchetes dobles agrego el nombre de la propiedad que le asigne antes, el cual era name.

{
    "title": "Multi-language app",
    "label": "Select another language!",
    "about": "About me",
    "home": "Home",
    "user": "My name is: {{name}}"
}

Y de esa manera interpolamos valores.

🈵 Mover las traducciones a archivos separados.

Pero que pasa cuando las traducciones son demasiadas, entonces tu archivo i18n.ts se saldría de control. Lo mejor sera moverlas a archivos separados.

Para esto necesitaremos instalar otro plugin.

npm install i18next-http-backend

Este plugin cargara los recursos desde un servidor, por lo que sera bajo demanda.

Ahora vamos a crear dentro de la carpeta public una carpeta i18n (public/i18n).
Y dentro vamos a ir creando archivos .json que serán nombrados según sea su traducción, por ejemplo.
El archivo es.json sera para las traducciones en Español, el archivo it.json sera solo para las traducciones en italiano, etc.
Al final tendremos 3 archivos porque en esta app solo manejamos 3 idiomas.

Luego, movemos cada contenido del objeto translation del archivo i18n.ts a su archivo JSON correspondiente.
Por ejemplo el archivo en.json.

{
    "title": "Multi-language app",
    "label": "Select another language!",
    "about": "About",
    "home": "Home"
}

Una vez echo eso con los 3 archivos, vamos al i18n.ts y vamos a modificar algunas cosas.

Primero la propiedad resources la vamos a quitar.
Vamos a importar el paquete de i18next-http-backend y mediante el método use, se lo pasamos como parámetro para que ejecute ese plugin.

import i18n from 'i18next';
import i18nBackend from "i18next-http-backend";
import { initReactI18next } from 'react-i18next';

i18n
    .use(i18nBackend)
    .use(initReactI18next)
    .init({
        fallbackLng: 'en',
        lng: 'en',
        interpolation:{
            escapeValue: false
        }
    });

export default i18n;

Finalmente, necesitamos agregar una nueva propiedad, la cual es backend que recibe un objeto, al cual accederemos a la propiedad loadPath.

La propiedad loadPath, recibe una función que contiene el lenguaje y debe retornar un string.
Pero una manera mas sencilla es interpolando la variable lng.

Asi tendremos nuestro path de donde se obtendrán las traducciones, nota que estoy apuntando a la carpeta public.

Ahora cuando quieras agregar un nuevo idioma, solo agregas el archivo json en la carpeta i18n dentro de public.

import i18n from 'i18next';
import i18nBackend from "i18next-http-backend";
import { initReactI18next } from 'react-i18next';

i18n
    .use(i18nBackend)
    .use(initReactI18next)
    .init({
        fallbackLng: 'en',
        lng: 'en',
        interpolation:{
            escapeValue: false
        },
        backend: {
            loadPath: 'http://localhost:5173/i18n/{{lng}}.json',
        }
    });

export default i18n;

Pero hay un paso mas que hacer, si notas en la propiedad loadedPath, el host es http://localhost:5173 y cuando lo suba a producción, no funcionaran las traducciones por lo cual debemos validar si estamos en modo desarrollo o no, para poder agregar el host correcto.

import i18n from 'i18next';
import i18nBackend from "i18next-http-backend";
import { initReactI18next } from 'react-i18next';

const getCurrentHost = import.meta.env.MODE === 'development' ? 'http://localhost:5173' : 'LINK TO PROD'

i18n
    .use(i18nBackend)
    .use(initReactI18next)
    .init({
        fallbackLng: 'en',
        lng: 'en',
        interpolation:{
            escapeValue: false
        },
        backend: {
            loadPath: `${getCurrentHost}/i18n/{{lng}}.json`,
        }
    });

export default i18n;

Un tip más, es que las traducciones como están en el backend podrían seguir siendo cargadas mientras la pagina ya esta lista, por lo que es aconsejable manejar un Suspense en la app.

import { Suspense } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { Menu } from './components/Menu';
import { About } from './pages/About';
import { Home } from './pages/Home';

const App = () => {

    return (

    <Suspense fallback='loading'>
        <BrowserRouter>
        <Menu />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/about' element={<About />} />
        </Routes>
      </BrowserRouter>
    </Suspense>

  )
}
export default App

El componente Suspense pone en pausa la app hasta que este lista, y en la propiedad fallback es lo que se le muestra al usuario mientras espera a que la aplicación este lista, aquí es un lugar perfecto para poner un loading o spinner.

Probablemente no se note una mejora considerable, ya que nuestra tiene muy pocas traducciones. Pero es una buena practica.

🈵 Conclusión.

Crear una app multi-idioma ahora resulta ser mas sencillo gracias a i18n y su plugins.

Espero que te haya gustado esta publicación y que también espero haberte ayudado a entender como realizar este tipo de aplicaciones de una manera mas fácil. 🙌

Si conoces alguna otra forma distinta o mejor de realizar esta aplicación con gusto puedes comentar todas tus observaciones y sugerencias, te lo agradecería bastante!.

Te invito a que revises mi portafolio en caso de que estés interesado en contactarme para algún proyecto! Franklin Martinez Lucas

🔵 No olvides seguirme también en twitter: @Frankomtz361

🈵 Demostración simple.

https://multi-lang-app-react.netlify.app/

🈵 Código fuente.

https://github.com/Franklin361/multi-lang-app