homepage/docs/widgets/authoring/component.md

title, description

title	description
Component Guide	How to create and configure Homepage widget components.

Homepage widgets are built using React components. These components are responsible for fetching data from the API and rendering the widget UI. Homepage provides a set of hooks and utilities to help you build your widget component.

A Basic Widget Component

Here is an example of a basic widget component:

import { useTranslation } from "next-i18next";

import Container from "components/services/widget/container";
import Block from "components/services/widget/block";
import useWidgetAPI from "utils/proxy/use-widget-api";

export default function Component({ service }) {
  const { t } = useTranslation();
  const { widget } = service;
  const { data, error } = useWidgetAPI(widget, "info");

  if (error) {
    return <Container service={service} error={error} />;
  }

  if (!data) {
    return (
      <Container service={service}>
        <Block label="yourwidget.key1" />
        <Block label="yourwidget.key2" />
        <Block label="yourwidget.key3" />
      </Container>
    );
  }

  return (
    <Container service={service}>
      <Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
      <Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
      <Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
    </Container>
  );
}

Breakdown

We'll cover two sections of the widget component: hooks and components.

Hooks

useTranslation

This hook is used to translate text and numerical content in widgets. Homepage provides a set of helpers to help you localize your widgets. You can learn more about translations in the Translations Guide.

useWidgetAPI

This hook is used to fetch data from the API. We cover this hook in more detail in the API Guide.

Components

• <Container>: This component is a wrapper for the widget. It provides a consistent layout for all widgets.
• <Block>: This component is used to display a key-value pair. It takes a label and value as props.