@massds/mayflower-react/dist/RichText/index.mjs

React versions of Mayflower design system UI components

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/**
 * RichText module.
 * @module @massds/mayflower-react/RichText
 */
import React from "react";
import PropTypes from "prop-types";
import ReactHtmlParser from "html-react-parser";
import ReactDOMServer from "react-dom/server";

const RichText = (_ref) => {
  let className = _ref.className,
      id = _ref.id,
      htmlTag = _ref.htmlTag,
      rawHtml = _ref.rawHtml,
      transform = _ref.transform,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["className", "id", "htmlTag", "rawHtml", "transform", "children"]);

  const CustomElement = htmlTag; // If chidlren don't exist, expect to render the rawHtml string.

  const markup = children ? ReactDOMServer.renderToStaticMarkup(children) : rawHtml;
  return /*#__PURE__*/React.createElement(CustomElement, _extends({
    ref: element => element,
    className: className,
    id: id
  }, rest), ReactHtmlParser(markup, {
    transform: transform
  }));
};

RichText.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The raw html nodes that you want to render. */
  children: PropTypes.node,

  /** The stringified raw html that you want to render. If children exist, will render children instead of rawHtml */
  rawHtml: PropTypes.string,

  /** A className that you want to component to reference. */
  className: PropTypes.string,

  /** An id to be rendered on the component. */
  id: PropTypes.string,

  /** A valid html tag you want the component wrapper to be. By default, this is a `div`. */
  htmlTag: PropTypes.string,

  /** The transform function will be called for every node that is parsed by ReactHtmlParser.
    * See documentation of html-react-parser for the transform function: https://www.npmjs.com/package/html-react-parser#transform-function
  * */
  transform: PropTypes.func
} : {};
RichText.defaultProps = {
  htmlTag: 'div'
};
export default RichText;