Skip to main content

Host Components

Host components are reusable React components provided by the theme rendering engine. All host components can be imported using named imports from the globally injected module fdk-core/components.

The FDKLink component provides a wrapper around the anchor tag (<a>) and handles internal navigation within the web application. It automatically manages routing and navigation state, ensuring seamless transitions between pages.

Example​

Use FDKLink instead of standard anchor tags when creating internal links to ensure proper navigation handling and state management.

  • to (string, required): The target URL for navigation
  • className (string, optional): CSS classes to apply to the link element
  • Standard anchor tag props are also supported
import { FDKLink } from 'fdk-core/components';
<FDKLink to={link}>
   <p className={styles.linkParagraph}> {title}</p>
</FDKLink>

Section Renderer​

The SectionRenderer component dynamically renders an array of page sections. It processes section data and displays each section according to its configuration, making it ideal for building flexible, data-driven page layouts.

Example​

import React from 'react';
import { SectionRenderer } from 'fdk-core/components';
import { useGlobalStore } from 'fdk-core/utils';

function Home({ fpi }) {
  /* Get PAGE data from store */
  const page = useGlobalStore(fpi.getters.PAGE) || {};
  /* Extract sections to be displayed on current page */
  const { sections = [], loading, error } = page || {};
  /* Handle error, if occurred */
  if (error) {
    return (
      <>
        <h1>Error Occured !</h1>
        <pre>{JSON.stringify(error, null, 4)}</pre>
      </>
    );
  }
  /* Handle loading state */
  if (loading) {
    return <Loader />;
  }
  /* Use `SectionRenderer` component to render the sections */
  return (
    <div className='wrapper'>
      <SectionRenderer sections={sections} />
    </div>
  );
}

HTML Content​

The HTMLContent component in React takes an HTML string as a content prop and renders it safely in the DOM.

Example​

import React from "react";
import { HTMLContent } from "fdk-core/components";

function MyComponent() {
  return (
    <HTMLContent content="<div><h1>Welcome!</h1><p>This is a custom HTML content.</p></div>" />
  );
}
export default MyComponent;