react-zendesk-helpcenter/es/Article.js

React library that makes it easy to render Zendesk Help Center content in your React apps.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["apiVersion", "articleId", "domain", "loadingComponent", "locale", "onError", "onLoad"];
import React, { ReactFragment, useEffect } from 'react';
import cleanProps from 'clean-react-props';
import useZendesk from './useZendesk';
/**
 * Article - Component
 *
 * @param {Object} props
 * @param {string=} props.apiVersion
 * @param {(number | string)} props.articleId
 * @param {string=} props.domain
 * @param {ReactFragment=} props.loadingComponent
 * @param {string=} props.locale
 * @param {(error) => void=} props.onError
 * @param {(data) => void=} props.onLoad
 * @returns {JSX.Element}
 */

var Article = function Article(_ref) {
  var _data$article;

  var apiVersion = _ref.apiVersion,
      articleId = _ref.articleId,
      domain = _ref.domain,
      loadingComponent = _ref.loadingComponent,
      locale = _ref.locale,
      onError = _ref.onError,
      onLoad = _ref.onLoad,
      rest = _objectWithoutProperties(_ref, _excluded);

  var _useZendesk = useZendesk({
    apiVersion: apiVersion,
    domain: domain,
    endpoint: articleId ? "/articles/".concat(articleId) : null,
    includeLocale: true,
    locale: locale
  }),
      data = _useZendesk.data,
      error = _useZendesk.error; // onError handlings


  useEffect(function () {
    if (error) {
      onError ? onError(error) : console.error(error);
    }
  }, [error]); // onLoad handling

  useEffect(function () {
    if (data) {
      onLoad && onLoad(data);
    }
  }, [data]); // Conditionally display loadingComponent, if provided

  if (!(data !== null && data !== void 0 && (_data$article = data.article) !== null && _data$article !== void 0 && _data$article.body)) {
    if (loadingComponent) {
      var LoadingComponent = loadingComponent;
      return /*#__PURE__*/React.createElement(LoadingComponent, null);
    }

    return null;
  }

  return /*#__PURE__*/React.createElement("div", _extends({}, cleanProps(rest), {
    dangerouslySetInnerHTML: {
      __html: data.article.body
    }
  }));
};

export default Article;