usePrismic Hook

Un hook personalizado para React que simplifica la obtención de datos de Prismic. Este hook te permite obtener los slices de una página específica de Prismic de manera eficiente y con tipado seguro usando TypeScript.

Instalación

Primero, asegúrate de tener instaladas las dependencias necesarias:

npm install @prismicio/client react

Uso Básico

El hook usePrismic te permite obtener los slices de una página de Prismic de manera sencilla. Aquí te muestro cómo usarlo paso a paso.

Paso 1: Importar el Hook

Importa el hook en tu componente:

import { usePrismic } from 'tu-paquete-use-prismic';

Paso 2: Definir los Tipos de Slices

Define los tipos de datos que esperas para cada slice. Esto te ayudará a mantener el código tipado y seguro.

type HeroData = {
  device_type: string;
  hero_title: string;
  linksection: string;
};

type DiscoveryData = {
  image: string;
  title_section: string;
  description: string;
  cta: {
    url: string;
    label: string;
  };
};

Paso 3: Usar el Hook en tu Componente

Ahora, puedes usar el hook usePrismic para obtener los datos de los slices hero y discovery.

const MyComponent = () => {
  const repositoryNameOrEndpoint = 'tu-repositorio-prismic';
  const pageId = 'homepage';
  const sliceTypes = ['hero', 'discovery'] as const;

  const { slices, loading, error } = usePrismic<typeof sliceTypes[number], HeroData | DiscoveryData>(
    repositoryNameOrEndpoint,
    pageId,
    sliceTypes
  );

  if (loading) {
    return <div>Cargando...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  const heroData = slices.hero as HeroData;
  const discoveryData = slices.discovery as DiscoveryData;

  return (
    <div>
      <h1>{heroData.hero_title}</h1>
      <p>{discoveryData.title_section}</p>
    </div>
  );
};

export default MyComponent;

Ejemplo Completo

Aquí tienes un ejemplo completo de cómo usar el hook usePrismic en un componente de React:

import React from 'react';
import { usePrismic } from 'tu-paquete-use-prismic';

type HeroData = {
  device_type: string;
  hero_title: string;
  linksection: string;
};

type DiscoveryData = {
  image: string;
  title_section: string;
  description: string;
  cta: {
    url: string;
    label: string;
  };
};

const MyComponent = () => {
  const repositoryNameOrEndpoint = 'tu-repositorio-prismic';
  const pageId = 'homepage';
  const sliceTypes = ['hero', 'discovery'] as const;

  const { slices, loading, error } = usePrismic<typeof sliceTypes[number], HeroData | DiscoveryData>(
    repositoryNameOrEndpoint,
    pageId,
    sliceTypes
  );

  if (loading) {
    return <div>Cargando...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  const heroData = slices.hero as HeroData;
  const discoveryData = slices.discovery as DiscoveryData;

  return (
    <div>
      <h1>{heroData.hero_title}</h1>
      <p>{discoveryData.title_section}</p>
    </div>
  );
};

export default MyComponent;