kintone のカスタマイズで React を使うと何が嬉しいか https://blog.r3it.com/react-on-kintone-1008c63ca808

entry.jsx

import React from "react";
import { render } from "react-dom";
import PdfView from "./PdfView";

(function () {

  kintone.events.on(["app.record.detail.show"], (event: Kintone.RecordEvent) => {

    const elm = kintone.app.record.getSpaceElement("space1");
    if (!elm) {
      return event;
    }

    render(
      <PdfView fileKey={event.record["file1"].value[0].fileKey} height={500} />,
      elm
    );

    return event;

  });

})();

PdfView.jsx

import React from "react";

export default class PdfView extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      height: this.props.height,
      fileKey: this.props.fileKey
    };
  }

  componentWillMount() {
    this.setImageUrl(this.state.fileKey).then((pdfData: Blob) => {
      const url = window.URL || window.webkitURL;
      this.setState({ ...this.state, imageUrl: url.createObjectURL(pdfData) });
    });
  }

  setImageUrl(fileKey: string): Promise<Blob> {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();

      xhr.open("GET", `/k/v1/file.json?fileKey=${fileKey}`, true);
      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
      xhr.responseType = "blob";

      xhr.onload = function (e) {
        if (this.status === 200) {
          resolve(this.response);
        }
      };

      xhr.send();
    });
  }

  render() {
    return <div className="pdfview">
      <object data={this.state.imageUrl} type="application/pdf" width="100%" height="100%" style={{ height: this.state.height }}>
      </object>
    </div>;
  }
}