Host Components

Host components are reusable react components which are provided by the theme rendering engine. All host components can be name imported from a globally injected module viz. fdk-core/components

FDKLink

FDKLink component is used to wrap the anchor tag and also do the respective internal navigation in web. It takes a to prop to specify the target URL. Developers can also use standard className prop to add any CSS classes to the link element.

Example:

import { FDKLink } from 'fdk-core/components';

<FDKLink to={link}>
   <p className={styles.linkParagraph}> {title}</p>
</FDKLink>

SectionRenderer

SectionRenderer component takes an array of sections to be displayed via a sections prop.

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>
  );
}

BlockRenderer

BlockRenderer renders a single block that an extension supplies. Use it when a section holds blocks and one of them is an extension binding rather than content the theme owns.

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

export function Component({ props, blocks }) {
  return (
    <div className="section">
      {blocks?.map((block, index) => (
        <BlockRenderer key={block?._id ?? index} block={block} />
      ))}
    </div>
  );
}

Prop	Type	Purpose
block	object	One block from the blocks array of the section

It renders extension bindings only. The component checks block.type and returns null for anything that is not extension-binding. Passing an ordinary content block produces no output and no error, which makes an empty result easy to misread as a data problem.

Render your own block types yourself, and pass only bindings to BlockRenderer:

{blocks?.map((block, index) =>
  block.type === "extension-binding" ? (
    <BlockRenderer key={index} block={block} />
  ) : (
    <MyBlock key={index} block={block} />
  )
)}

Internally the component wraps the block as a one-item section and renders it through SectionRenderer, so an extension block behaves like any other section at render time.

Read Bindings for how a binding reaches the theme.