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