@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
50 lines • 2.36 kB
JavaScript
const _excluded = ["className", "id", "htmlTag", "rawHtml", "transform", "children"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
/**
* 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, _excluded);
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;