Burdy React Utils

Powerful utilities to simplify usage of the Burdy for the React Projects. Burdy React Utils inherit all functionalities from Web Utils

Installation

npm i @burdy-cms/react-utils

Functionalities

createApi

Creates a CreateApiType instance that can be used to call Burdy Content Api.

Example for the NextJS project

//burdy-api.ts
import { createApi } from '@burdy-cms/web-utils';

export const burdyApi = createApi({
  xContentToken: process.env.BURDY_ACCESS_TOKEN as string,
  host: process.env.NEXT_PUBLIC_CMS_URL as string,
});

And later call it with:

import {burdyApi} from "../../common/burdy-api";
const page = await burdyApi.getPage(pagePath as string, options);

Or to search for the pages

const {results} = await burdyApi.searchPages({
  parent: pagePath as string
});

createRewrites

Creates a RewritesObject instance that can be used to rewrite paths based on the configuration.

Accepts rewriteMap and origin (optional) as object parameters.

import { createRewrites } from '@burdy-cms/web-utils'; 
import axios from 'axios';

const rewrites = createRewrites({
  origin: 'https://cms.website.com/api/content',
  rewrite: [
    {
      source: '/:lang(fr|de)/:path*',
      destination: {
        page: '/sites/{lang}/{path}',
        header: '/sites/{lang}/fragments/header',
        footer: '/sites/{lang}/fragments/footer'
      }
    },
    {
      source: '/:path*',
      destination: {
        page: '/sites/en/{path}',
        header: '/sites/en/fragments/header',
        footer: '/sites/en/fragments/footer'
      }
    }
  ]
});

/**
  Page = https://cms.website.com/api/content/sites/fr/fragments/home
  Header = https://cms.website.com/api/content/sites/fr/fragments/header
  Footer = https://cms.website.com/api/content/sites/fr/fragments/footer
**/
const { page, footer, header } = rewrites.rewrite('/fr/home');

// Fetch data from Burdy
const [pageRequest, footerRequest, headerRequest] = await Promise.all([
  page,
  footer,
  header
]);

usePreview

Burdy hook that allows you to easily subscribe (bind the data) and update the preview mode.

// Next.js example [[...slug]].tsx
import { usePreview } from '@burdy-cms/react-utils';

const Page = (props) => {
  // Will listen to Burdy for content updates and communicate updates to Burdy
  const page = usePreview(props.page);

  const {
    footerProps,
    headerProps,
  } = props;

  const theme = useTheme();
  const sections = page?.meta?.content?.sections || [];

  return (
    <>
      {page?.meta?.content?.announcement && <Announcement {...(cleanObjectPropTypes(page?.meta?.content?.announcement))}></Announcement>}
      <Header logo={headerProps?.logo?.[0]} logoTitle='Burdy' logoLink={{href: '/'}} links={headerProps?.links?.map?.(link => link?.link || undefined)} />
      {sections?.map?.(componentMapper)}
      <Footer
        sections={footerProps?.sections || []}
        copyright={footerProps?.copyright || ''}
        copyrightLinks={footerProps?.copyrightLinks}
        maxWidth={footerProps?.maxWidth || 'lg'}
      />
    </>
  );
};


export const getServerSideProps: GetServerSideProps = async (context) => {
  const path = '/'+(context.params?.slug as string[] || []).join('/');
  const {footer, header} = rewrites.rewrite(path);

  const [
    footerFragment,
    headerFragment
  ] = await Promise.all([
    burdyApi.getPage(footer),
    burdyApi.getPage(header)
  ]);

  return {
    footerProps: footerFragment?.meta?.content,
    headerProps: headerFragment?.meta?.content
  }
}

RichText

Component for handling richtext content from Burdy:

import { RichText } from '@burdy-cms/react-utils';

const SomeComponent = () => (
  <RichText richText={BURDY_CONTENT} />
);

Props:

export type RichTextProps = {
  as?: 'div' | 'article' | 'section';
  richText?: {
    blocks?: any[];
    entityMap?: any;
  }
  codeHighlight?: boolean;
  onRenderEntity?: (entity: EntityProps, children?: ReactNode) => JSX.Element | null | undefined | void;
};

onRenderEntity allows us to create custom rendered for any atomic component in rich text such as LINK, IMAGE, TEXT_EDITOR, DIVIDER, COMPONENT.

To use it just return custom component:

import Image from 'next/image'

<RichText richText={BURDY_CONTENT} onRenderEntity={(entity) => {
  switch (entity.type) {
    case 'IMAGE':
      return <Image src={entity?.data?.src} alt={entity?.data?.alt} />
      break;
    default:
      return null;
  }
}} />

richtextToHtml

A function for converting Richtext (DraftJS) Editor content to plain HTML.

This is a forked version of draftjs-to-html draftjs-to-html created by Jyoti Puri.

import { richtextToHtml } from '@burdy-cms/react-utils';

const rawContentState = BURDY_RICHTEXT_RESPONSE;

const markup = richtextToHtml(
  rawContentState
);
Copyright © Burdy Technologies. All rights reserved.