Bien para darle vida a ésto seguiremos los siguientes pasos

Vamos a empezar por crear nuestra tabla en Excel con hojas de cálculo de google.

Google Sheets

Creamos una nueva hoja de cálculo y la llenamos con nuestros datos. También vamos a delimitar nuestra tabla con:
id, name, description, image, price.Podemos completar la tabla y agregar ítems en las columnas para obtener más información. Puedes proporcionar una ubicación de algún enlace de imagen; por ejemplo, en mi caso, he utilizado imágenes de un repositorio de GitHub y, para probar, un enlace de Google Fotos.

Publicar en la web

Una vez creada nuestra tabla, podemos acceder a ella mediante la opción de Google para compartir y publicar en la web. Vamos a la opción deArchivo=>Compartir=>Publicar en la Web.

A continuación nos aparecerá una ventana como ésta:

Seleccionamos valores separados por comas que es un archivo.csvy le damos enPublicar.

Esto nos generará un link con nuestro archivo de google sheets en formato.csvpara poder requerirlo en nestra aplicación web. A continuación veremos lo siguiente:

API Routes

Copiamos y pegamos el link en nuestro componente de Reactjs con Nextjs y Api Routes.

En nuestro componente vamos a escribir como lo hago aquí, en principio he usadouseState y useEffectde la siguiente manera:

1import { useState, useEffect } from 'react'
2
3export default function CsvSheets() {
4  const [items, setItems] = useSatate([])
5
6useEffect(() => {
7  const fetchData = async () => {
8    try {
9      const response = await fetch(
10        'TU_LINK_DE_GOOGLE_SHEETS',
11      );
12      const csv = await response.text();
13      const parsedItems = csv
14      .split('\n')
15      .slice(1)
16      .map((row) => {
17          const [id, name, description, image, price] = row.split(',');
18          return { id, name, description, image, price: Number(price) };
19      });
20      setItems(parsedItems)
21        } catch (error) {
22            console.error('Error fetching data:', error);
23      }
24    };
25    
26    fetchData();
27    }, []);
28
29    return (
30      <div>
31        {items.map((pic) => (
32        <article key={pic.id}>
33          <p className="text-2xl font-mono text-center py-2">{pic.id}</p>
34          <span>
35            Price: U$D {pic.price}
36          </span>
37            <img className="rounded-md" src={pic.image} alt="Drawing GerArt" />
38         <aside className="text-center font-semibold my-3">
39            <p>{pic.name}</p>
40            <p>{pic.description}</p>
41         </aside>
42        </article>
43        ))}
44      </div>
45    )
46  }

Explicando un poco el desglose del código, en la obtención asíncrona de datos mediante el uso de useEffect, creamos una constanteresponse que espera la respuesta de nuestro archivo de Google Sheets. Además, creamos una constantecsvque espera el archivo en formato "CSV" y extrae su texto.

const response = await fetch( 'TU_LINK_DE_GOOGLE_SHEETS');

const csv = await response.text()

Para formatear el archivo y aplicarlo a nuestra app, vamos a crear una constante:

const parseItems = csv.slpit('\n').slice(1)

Elsplit('\n')nos da el formato respetando y separando cada texto por un salto de línea.

Elslice(1)sirve para evitar mostrar la fila: id, nombre, descripción, etcétera, de nuestro archivo CSV

Se realiza una iteración sobre cada artículo para crear un objeto con las propiedades necesarias.

Posteriormente, se utiliza un .map para recorrer cada artículo y mostrarlo en pantalla.

Papa Parse

PapaParsees una biblioteca de JavaScript que se utiliza para analizar archivos CSV en el navegador o en entornos Node.js. La biblioteca facilita el trabajo con datos en formato CSV, proporcionando funciones para convertir cadenas CSV en objetos JavaScript y viceversa.

Algunas características clave dePapaParseincluyen:

1. Facilidad de uso: PapaParse simplifica el proceso de análisis de archivos CSV en comparación con implementaciones manuales. Proporciona una interfaz fácil de usar para trabajar con datos CSV.
2. Soporte para diferentes formatos: Puede manejar una variedad de formatos CSV, incluso aquellos con delimitadores personalizados, saltos de línea y otros ajustes específicos.
3. Procesamiento en segundo plano: PapaParse puede ejecutarse en segundo plano (usando Web Workers) para no bloquear el hilo principal del navegador, permitiendo la carga y procesamiento eficiente de grandes conjuntos de datos CSV.
4. Configuración de opciones: Ofrece diversas opciones de configuración, como la especificación del delimitador, la fila de encabezado, el manejo de comillas, entre otras, para adaptarse a las necesidades específicas de análisis.

Lo primero que tenemos que hacer es instalar la dependencia:

1npm install papaparse

Pueden estudiar la documentación para entender que opciones de configuración y manipulación del CSV tiene

Reduce

Bien, ahora vamos con el componente utilizando reduce:

1import { useState, useEffect } from "react";
2import Papa from "papaparse";
3
4export const useData = (columnNamesFetch, customURL) => {
5  const [data, setData] = useState([]);
6  const [loading, setLoading] = useState(true);
7
8  useEffect(() => {
9    const fetchData = async () => {
10      try {
11        const res = await fetch(customURL);
12        const csv = await res.text();
13
14        const parsedCsv = [];
15
16        let firstLineSkipped = false;
17
18        Papa.parse(csv, {
19          header: false,
20          dynamicTyping: true,
21          skipEmptyLines: true,
22          step: (results) => {
23            if (!firstLineSkipped) {
24              firstLineSkipped = true;
25              return;
26            }
27
28            const rowData = columnNamesFetch.reduce(
29              (acc, columnName, index) => {
30                let value = results.data[index];
31
32                if (typeof value === "string") {
33                  value = value
34                    .replace(/""/g, '"')
35                    .replace(/(?:\r\n|\r|\n)/g, " ");
36                }
37
38                acc[columnName] = value;
39                return acc;
40              },
41              {}
42            );
43            parsedCsv.push(rowData);
44          },
45          complete: () => {
46            setData(parsedCsv);
47            setLoading(false);
48          },
49          error: (error) => {
50            console.error("Error al parsear el CSV 😢:", error);
51            setLoading(false);
52          },
53        });
54      } catch (error) {
55        console.error("Error al hacer el fetching de data 🤔:", error);
56        setLoading(false);
57      }
58    };
59
60    fetchData();
61  }, [columnNamesFetch, customURL]);
62
63  return { data, loading };
64};
65
66export default useData;

De esta manera, creamos un componente reutilizable que nos permite renderizar diferentes arrays fácilmente. Este enfoque proporciona flexibilidad al adaptarse a diferentes conjuntos de datos, permitiéndonos utilizar el mismo componente para diversos propósitos. Por ejemplo:

1import { CSV_URL } from "@/Constants";
2import useData from '@/ubicacion-del-componente'
3
4const columnName = [
5    "ITEM",
6    "TITLE",
7    "DESCRIPTION",
8    "PRICE",
9    "IMAGE",
10    "URL",
11  ];
12
13export const ComponentExample = () => {
14    const { data } = useData(columnName, CSV_URL)
15
16    return (
17        <>
18            {data.map((CSV, index) => (
19                <article key={index}>
20                {CSV.ITEM || "" ? (
21                    <div>
22                      <span>{CSV.ITEM}</span>
23                      <h1>{CSV.TITLE}</h1>
24                      <img src={CSV.IMAGE} alt="Image Item" />
25                      <p>{CSV.DESCRIPTION}</p><span>{CSV.PRICE}</span>
26                      <a href={CSV.URL}>Ir al ítem</a>
27                    </div>
28                ): null}
29                </article>
30            ))}
31        </>
32    )
33}

Este es un ejemplo básico para poder utilizar el componente de manera adecuada, incluye una ternaria para verificar si el item existe, hay otras lógicas para renderizar de acuerdo a sus preferencias, pueden usar el operador&&:

1{CSV.ITEM && (
2    <div>
3      <span>{CSV.ITEM}</span>
4      <h1>{CSV.TITLE}</h1>
5      <img src={CSV.IMAGE} alt="Image Item" />
6      <p>{CSV.DESCRIPTION}</p>
7      <span>{CSV.PRICE}</span>
8      <a href={CSV.URL}>Ir al ítem</a>
9    </div>
10  )}

¡Gracias por acompañarnos hasta el final de este artículo! Hemos concluido, y espero que puedan aplicar lo aprendido según sus necesidades.

¡Si les gusta el diseño y efecto de las cajas que contienen los dibujos! Utilizo Atropos js la cuál he modificado a mi gusto el estilo de las mismas.

Aquí les dejo el enlace para que puedan leer su documentación y utilizarlo, es de código abierto y tiene otros asombrosos efectos de cartas 3d las cuales utilizo en ésta web;