Overview

The RichText component is used to handle text with different formatting options.

The following formatting options are currently supported:

headings from level 1 to 6 (headings 4 to 6 are available starting on [email protected])
paragraph
bold
italic
strikethrough
underline
link
image
horizontal line
bullet and numbered list

Import

The RichText component can be imported directly from the frontend-ui package, which is pre-installed in your Shogun Frontend store.

import RichText from 'frontend-ui/RichText'

Usage

RichText accepts a source prop, which must be of the type richtext.

import React from 'react'
import RichText from 'frontend-ui/RichText'

const MyComponent = ({ content }) => (
  <RichText source={content} />
)

export default MyComponent

richtext type has the following shape:

// Example showing all the options available for the richtext type

const someRichTextContent = [
  {
    "type": "paragraph",
    "children": [
      {
        "text": "This is a normal paragraph."
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "italic": true,
        "text": "This is an italic paragraph."
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "strikethrough": true,
        "text": "This is a strikethrough paragraph."
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "underline": true,
        "text": "This is an underlined paragraph."
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "text": ""
      },
      {
        "url": "https://getshogun.com/",
        "type": "link",
        "children": [
            {
                "text": "This is a link."
            }
        ],
        "external": true
      },
      {
        "text": ""
      }
    ]
  },
  {
    "alt": "",
    "url": "https://f.shgcdn.com/11e82e07-26f9-46b5-9dde-f1f46d7a9203/",
    "type": "image",
    "children": [
      {
        "text": ""
      }
    ]
  },
  {
      "type": "separator",
      "children": [
          {
              "text": ""
          }
      ]
  },
  {
    "type": "bulletedList",
    "children": [
      {
        "type": "listItem",
        "children": [
          {
            "text": "This"
          }
        ]
      },
      {
        "type": "listItem",
        "children": [
          {
            "text": "is a normal"
          }
        ]
      },
      {
        "type": "listItem",
        "children": [
          {
            "text": "list"
          }
        ]
      }
    ]
  },
  {
    "type": "numberedList",
    "children": [
      {
        "type": "listItem",
        "children": [
          {
            "text": "This"
          }
        ]
      },
      {
        "type": "listItem",
        "children": [
          {
            "text": "is a numbered"
          }
        ]
      },
      {
        "type": "listItem",
        "children": [
          {
            "text": "list"
          }
        ]
      }
    ]
  },
  {
    "type": "h1",
    "children": [
      {
        "text": "This is a heading level 1"
      }
    ]
  },
  {
    "type": "h2",
    "children": [
      {
        "text": "This is a heading level 2"
      }
    ]
  },
  {
    "type": "h3",
    "children": [
      {
        "text": "This is a heading level 3"
      }
    ]
  },
  {
    "type": "h4",
    "children": [
      {
        "text": "This is a heading level 4"
      }
    ]
  },
  {
    "type": "h5",
    "children": [
      {
        "text": "This is a heading level 5"
      }
    ]
  },
  {
    "type": "h6",
    "children": [
      {
        "text": "This is a heading level 6"
      }
    ]
  }
]