import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as RichTextStories from "./src/rich-text.stories"; import packageInfo from "./package.json";

RichText

Version {packageInfo.version} Component takes in json data and returns ReactNodes.

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

Basic usage

import { RichText } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <RichText data={richJson} />
    </div>
  );
};

Override a node

If you need to override a node you can pass in customNodeTypes as a prop

import { RichText } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <RichText
        data={richJson}
        customNodeTypes={{
          "header-2": (_, children) => <h1>{children}</h1>,
        }}
      />
    </div>
  );
};

Usage with custom callbacks

Custom callbacks can be used to optimize images, wrap links or add custom styling

import { RichText } from "@purpurds/purpur";
import Link from "next/link";

const link = (children: React.ReactNode[], href?: string): ReactNode => {
  return (
    <Link href={href}>
      <a>{children}</a>
    </Link>
  );
};

const image = (src: string, alt?: string): ReactNode => {
  return <img src={`${src}?q=70`} alt={alt} />;
};

const image = (src: string, alt?: string, contentType?: string): ReactNode => {
  const format = contentType === "image/jpg" ? "webp" : "gif";
  return <img src={`${src}?fm=${format}&q=70`} alt={alt} />;
};

const videoPoster = (url: string): string => {
  return `${url}?q=70`;
};

export const MyComponent = () => {
  return <RichText data={richJson} link={link} image={image} videoPoster={videoPoster} />;
};