react-json-formatter/dist/index.js

Formatting json data to JSX of React

import React, { useMemo, useCallback } from "react";
function JsonFormatter({
  json,
  jsonClassName: {
    booleanClassName = "",
    braceClassName = "",
    bracketClassName = "",
    className = "",
    commaClassName = "",
    falseClassName = "",
    nullClassName = "",
    numberClassName = "",
    propertyClassName = "",
    stringClassName = "",
    tabSpaceClassName = "",
    trueClassName = ""
  } = {},
  jsonStyle: {
    booleanStyle = {},
    braceStyle = {},
    bracketStyle = {},
    commaStyle = {},
    falseStyle = {},
    nullStyle = {},
    numberStyle = {},
    propertyStyle = {},
    stringStyle = {},
    style = {},
    tabSpaceStyle = {},
    trueStyle = {}
  } = {},
  tabWith = 2
}) {
  const jsonObject = useMemo(() => {
    if (typeof json === "string") {
      try {
        return JSON.parse(json);
      } catch (error) {
        return json;
      }
    }
    return json;
  }, [json]);
  const repeatTabSpace = useCallback(
    (times) => /* @__PURE__ */ React.createElement("span", { className: tabSpaceClassName, style: tabSpaceStyle }, " ".repeat(tabWith * times)),
    [tabSpaceClassName, tabSpaceStyle, tabWith]
  );
  const categorize = useCallback(
    (data, tabSpaceRepeatTimes) => {
      switch (Object.prototype.toString.call(data)) {
        case "[object Number]": {
          return /* @__PURE__ */ React.createElement("span", { className: numberClassName, style: numberStyle }, data);
        }
        case "[object String]": {
          return /* @__PURE__ */ React.createElement(
            "span",
            {
              className: stringClassName,
              style: stringStyle
            },
            `"${data}"`
          );
        }
        case "[object Boolean]": {
          const dataJSX = data ? /* @__PURE__ */ React.createElement(
            "span",
            {
              className: `${booleanClassName} ${trueClassName}`,
              style: { ...booleanStyle, ...trueStyle }
            },
            "true"
          ) : /* @__PURE__ */ React.createElement(
            "span",
            {
              className: `${booleanClassName} ${falseClassName}`,
              style: { ...booleanStyle, ...falseStyle }
            },
            "false"
          );
          return dataJSX;
        }
        case "[object Object]": {
          return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: braceClassName, style: braceStyle }, "{"), /* @__PURE__ */ React.createElement("br", null), Object.entries(data).map(
            ([key, value], index, list) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, repeatTabSpace(tabSpaceRepeatTimes + 1), /* @__PURE__ */ React.createElement(
              "span",
              {
                className: propertyClassName,
                style: propertyStyle
              },
              `"${key}": `
            ), categorize(value, tabSpaceRepeatTimes + 1), index !== list.length - 1 && /* @__PURE__ */ React.createElement("span", { className: commaClassName, style: commaStyle }, ","), /* @__PURE__ */ React.createElement("br", null))
          ), repeatTabSpace(tabSpaceRepeatTimes), /* @__PURE__ */ React.createElement("span", { className: braceClassName, style: braceStyle }, "}"));
        }
        case "[object Array]": {
          return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: bracketClassName, style: bracketStyle }, "["), /* @__PURE__ */ React.createElement("br", null), data.map((value, index, list) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, repeatTabSpace(tabSpaceRepeatTimes + 1), categorize(value, tabSpaceRepeatTimes + 1), index !== list.length - 1 && /* @__PURE__ */ React.createElement("span", { className: commaClassName, style: commaStyle }, ","), /* @__PURE__ */ React.createElement("br", null))), repeatTabSpace(tabSpaceRepeatTimes), /* @__PURE__ */ React.createElement("span", { className: bracketClassName, style: bracketStyle }, "]"));
        }
        case "[object Null]": {
          return /* @__PURE__ */ React.createElement("span", { className: nullClassName, style: nullStyle }, "null");
        }
        default:
          return /* @__PURE__ */ React.createElement("span", null, "type error");
      }
    },
    [
      booleanClassName,
      booleanStyle,
      braceClassName,
      braceStyle,
      bracketClassName,
      bracketStyle,
      commaClassName,
      commaStyle,
      falseClassName,
      falseStyle,
      nullClassName,
      nullStyle,
      numberClassName,
      numberStyle,
      propertyClassName,
      propertyStyle,
      repeatTabSpace,
      stringClassName,
      stringStyle,
      trueClassName,
      trueStyle
    ]
  );
  const result = useMemo(
    () => categorize(jsonObject, 0),
    [categorize, jsonObject]
  );
  return /* @__PURE__ */ React.createElement("div", { className, style }, /* @__PURE__ */ React.createElement("div", null, result));
}
export {
  JsonFormatter as default
};
//# sourceMappingURL=index.js.map