Uncustomizable Markup

Use Uncustomizable Markup...

To style sections of content where we can’t set CSS classes, so we can’t use the SWAN APIs.

Don't use Uncustomizable Markup...

To save time and avoid adding CSS classes, even though we could.

Usage

Use Uncustomizable Markup 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 output. The component will apply SWAN’s look-and-feel to any <ul>, <ol>, <table>, and heading (<h1>-<h6>) tags inside it, even if they don't have the SWAN CSS classes on them.

ReactVanilla

<UncustomizableMarkup>
  // uncustomizable content goes here
</UncustomizableMarkup>

<UncustomizableMarkup>
  // uncustomizable content goes here
</UncustomizableMarkup>

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

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

Examples

Unordered List

ReactVanilla

<>
  <Typography mb={2}>Default</Typography>
  <div>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
  <Typography mt={6} mb={2}>
    UncustomizableMarkup
  </Typography>
  <UncustomizableMarkup>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </UncustomizableMarkup>
</>

<>
  <Typography mb={2}>Default</Typography>
  <div>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
  <Typography mt={6} mb={2}>
    UncustomizableMarkup
  </Typography>
  <UncustomizableMarkup>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </UncustomizableMarkup>
</>

<div>
  <div class="swan-mb-2">Default</div>
  <div>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
  <div class="swan-mt-6 swan-mb-2">UncustomizableMarkup</div>
  <div class="swan-markup">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
</div>

<div>
  <div class="swan-mb-2">Default</div>
  <div>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
  <div class="swan-mt-6 swan-mb-2">UncustomizableMarkup</div>
  <div class="swan-markup">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
</div>

Ordered List

ReactVanilla

<>
  <Typography mb={2}>Default</Typography>
  <div>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </div>
  <Typography mb={2} mt={6}>
    UncustomizableMarkup
  </Typography>
  <UncustomizableMarkup>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </UncustomizableMarkup>
</>

<>
  <Typography mb={2}>Default</Typography>
  <div>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </div>
  <Typography mb={2} mt={6}>
    UncustomizableMarkup
  </Typography>
  <UncustomizableMarkup>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </UncustomizableMarkup>
</>

<div>
  <div class="swan-mb-2">Default</div>
  <div>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </div>
  <div class="swan-mb-2 swan-mt-6">UncustomizableMarkup</div>
  <div class="swan-markup">
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </div>
</div>

<div>
  <div class="swan-mb-2">Default</div>
  <div>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </div>
  <div class="swan-mb-2 swan-mt-6">UncustomizableMarkup</div>
  <div class="swan-markup">
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </div>
</div>

Table

Note: you still need to add the style key for the Table component! Uncustomizable Markup doesn't natively contain all the CSS for tables.

ReactVanilla

<>
  <Typography mb={2}>Default</Typography>
  <table>
    <thead>
      <tr>
        <th>Table header</th>
        <th>Table header</th>
        <th>Table header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This table has thead and tbody tags.</td>
        <td>Table data</td>
        <td>Table data</td>
      </tr>
      <tr>
        <td>Table data</td>
        <td>Table data</td>
        <td>Table data</td>
      </tr>
    </tbody>
  </table>
  <Typography mb={2} mt={8}>
    Table component (using &quot;dividers&quot; skin)
  </Typography>
  <div>
    <table>
      <thead>
        <tr>
          <th>Qty</th>
          <th>Regular</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>2</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>3</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
      </tbody>
    </table>
  </div>
  <Typography mb={2} mt={8}>
    UncustomizableMarkup
  </Typography>
  <UncustomizableMarkup>
    <table>
      <thead>
        <tr>
          <th>Qty</th>
          <th>Regular</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>2</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>3</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
      </tbody>
    </table>
  </UncustomizableMarkup>
</>

<>
  <Typography mb={2}>Default</Typography>
  <table>
    <thead>
      <tr>
        <th>Table header</th>
        <th>Table header</th>
        <th>Table header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This table has thead and tbody tags.</td>
        <td>Table data</td>
        <td>Table data</td>
      </tr>
      <tr>
        <td>Table data</td>
        <td>Table data</td>
        <td>Table data</td>
      </tr>
    </tbody>
  </table>
  <Typography mb={2} mt={8}>
    Table component (using &quot;dividers&quot; skin)
  </Typography>
  <div>
    <table>
      <thead>
        <tr>
          <th>Qty</th>
          <th>Regular</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>2</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>3</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
      </tbody>
    </table>
  </div>
  <Typography mb={2} mt={8}>
    UncustomizableMarkup
  </Typography>
  <UncustomizableMarkup>
    <table>
      <thead>
        <tr>
          <th>Qty</th>
          <th>Regular</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>2</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>3</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
      </tbody>
    </table>
  </UncustomizableMarkup>
</>

<div>
  <div class="swan-mb-2">Default</div>
  <table>
    <thead>
      <tr>
        <th>Table header</th>
        <th>Table header</th>
        <th>Table header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This table has thead and tbody tags.</td>
        <td>Table data</td>
        <td>Table data</td>
      </tr>
      <tr>
        <td>Table data</td>
        <td>Table data</td>
        <td>Table data</td>
      </tr>
    </tbody>
  </table>
  <div class="swan-mb-2 swan-mt-8">Table component (using "dividers" skin)</div>
  <div>
    <table>
      <thead>
        <tr>
          <th>Qty</th>
          <th>Regular</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>2</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>3</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="swan-mb-2 swan-mt-8">UncustomizableMarkup</div>
  <div class="swan-markup">
    <table>
      <thead>
        <tr>
          <th>Qty</th>
          <th>Regular</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>2</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>3</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div>
  <div class="swan-mb-2">Default</div>
  <table>
    <thead>
      <tr>
        <th>Table header</th>
        <th>Table header</th>
        <th>Table header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This table has thead and tbody tags.</td>
        <td>Table data</td>
        <td>Table data</td>
      </tr>
      <tr>
        <td>Table data</td>
        <td>Table data</td>
        <td>Table data</td>
      </tr>
    </tbody>
  </table>
  <div class="swan-mb-2 swan-mt-8">Table component (using "dividers" skin)</div>
  <div>
    <table>
      <thead>
        <tr>
          <th>Qty</th>
          <th>Regular</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>2</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>3</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="swan-mb-2 swan-mt-8">UncustomizableMarkup</div>
  <div class="swan-markup">
    <table>
      <thead>
        <tr>
          <th>Qty</th>
          <th>Regular</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>2</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
        <tr>
          <td>3</td>
          <td>X.XX</td>
          <td>$X.XX</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

React Usage

Use React's dangerouslySetInnerHTML functionality if your uncustomizable content is a string:

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

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

Pass children if your uncustomizable content is already transformed into a React Node:

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

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

Uncustomizable Markup

Use Uncustomizable Markup...

Don't use Uncustomizable Markup...

Usage

Examples

Unordered List

Ordered List

Table

React Usage

Best practices

Props

Related