@hig/rich-text

HIG RichText

Stats

StarsIssuesVersionUpdatedCreatedSize
@hig/rich-text
1422441.2.07 months ago3 years agoMinified + gzip package size for @hig/rich-text in KB

Readme

Rich Text

The Rich Text component applies the HIG typography styles to whatever is passed to it, whether that be React children or regular HTML. This is particularly useful for styling markdown content.

Read more about when and how to use the Typography components on the HIG website.

Getting started

yarn add @hig/rich-text @hig/theme-context @hig/theme-data

Import the component and font CSS

import RichText from '@hig/rich-text';
import "@hig/fonts/build/ArtifaktElement.css";

Basic usage

<RichText>
  <h1>Make Your Rich Text Richer</h1>
  <p>All you need to do is wrap it in a <code>{`<RichText />`}</code> component.</p>
</RichText>

Custom CSS

Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

RichText also has a stylesheet prop that accepts a function wherein you can modify its styles. For instance

import RichText from '@hig/rich-text';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    richText: {
      ...styles.richText,
      color: themeData["colorScheme.status.error"]
    }
  });

  return (
    <RichText stylesheet={customStylesheet} />
  );
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.