Vistaprint

Uncustomizable Markup

Visage typically requires specific class names to be added on to components in order to style them properly, but sometimes you need to render content that was generated by a third-party tool, and you don't have a good way of adding Visage class names onto the generated content.

For instance, Contentful's rich-text utility allows content authors to create bulleted lists, but we don't have any way of telling Contentful to add specific Visage class names onto its generated bullet lists — so we need another way to make sure that the content is styled properly.

That's what the Uncustomizable Markup component is for! It is a wrapper element that applies a Visage standard look-and-feel to some HTML tags inside that wrapper.

jsx
<UncustomizableMarkup>
  // uncustomizable content goes here
</UncustomizableMarkup>
<!-- doesn't have to a be a div tag; use on any tag -->
<div class="uncustomizable-markup">
  <!-- uncustomizable content goes here -->
</div>

Examples

With <ul>

Before (HTML default):

  • item 1

  • item 1

  • item 1

  • item 1

After (using Uncustomizable Markup):

  • item 1
  • item 1
  • item 1
  • item 1

With <ol>

Before (HTML default):

  1. item 1

  2. item 1

  3. item 1

  4. item 1

After (using Uncustomizable Markup):

  1. item 1
  2. item 1
  3. item 1
  4. item 1

With <table>

Before (HTML default):

Table headerTable headerTable header
This table has thead and tbody tags.Table dataTable data
Table dataTable dataTable data

After (using Uncustomizable Markup):

Table headerTable headerTable header
This table has thead and tbody tags.Table dataTable data
Table dataTable dataTable data

React Usage

You can use React's dangerouslySetInnerHTML functionality if your uncustomizable content is a string.

typescript
const ThirdPartyContent = () => {
  // content is a string
  const someThirdPartyContent = `
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 2</li>
  </ul>
  `


  return (
    <UncustomizableMarkup
      dangerouslySetInnerHTML={{ __html: someThirdPartyContent }}
    />
  )
}

Or you can simply pass children if your uncustomizable content is already transformed into a React Node.

typescript
const ThirdPartyContent = () => {
  // content is a React Node
  const someThirdPartyContent = (
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 2</li>
    </ul>
  )


  return <UncustomizableMarkup>{someThirdPartyContent}</UncustomizableMarkup>
}

Components

UncustomizableMarkup

UncustomizableMarkup has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

Guidelines

Developer Guidelines

  • This component should be placed around any output from the rich text editor of a CMS, if that CMS doesn't allow us to add CSS classes to the editor's content such as bullet lists. This applies to Sitecore, Contentful, WordPress, and others.