UNPKG

@massds/mayflower-react

Version:

React versions of Mayflower design system UI components

50 lines 2.36 kB
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;