React component for previewing PDF

PdfPreview.jsx

import React, {Component, PropTypes} from 'react';
require('pdfjs-dist');

export default
class PdfPreview extends Component {
  static propTypes = {
    file: PropTypes.object
  };

  constructor(props) {
    super(props);
    this.state = {
      width: 500,
      height: 200
    };
  }

  componentDidMount() {
    console.log('PdfPreview did mount');
    const data = this.props.file.data;
    PDFJS.getDocument(data)
      .then((doc) => doc.getPage(1).then((page) => {
        const unscaledViewport = page.getViewport(1);
        const canvas = this.refs.pdfCanvas;
        const scale = canvas.width / unscaledViewport.width; // Math.min((canvas.height / unscaledViewport.height), (canvas.width / unscaledViewport.width));
        const xOffset = 0; // (unscaledViewport.height - canvas.height) / 2;
        const yOffset = 0; // (unscaledViewport.width - canvas.width) / 2;
        const scaledViewport = new PDFJS.PageViewport(page.view, scale, 0, xOffset, -yOffset);
        const scaledHeight = unscaledViewport.height * scale;
        console.log('refs', this.refs);
        const canvasContext = canvas.getContext('2d');
        canvas.height = scaledHeight;

        this.renderCanvas = () => page.render({canvasContext, viewport: scaledViewport}).then(() => this.resizeSilently(scaledHeight));
        return this.renderCanvas();
      })).then((res) => console.log('rendered', res), (err) => console.error(err));
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.state.width !== nextState.width;
  }

  componentDidUpdate() {
    this.renderCanvas();
  }

  resizeSilently(newHeight) {
    console.log('resize to', newHeight);
    this.setState({height: newHeight});
  }

  render() {
    return (
      <div style={{width: '100%'}}>
        <canvas ref="pdfCanvas" width={this.state.width} height={this.state.height} style={{border: '1px solid #eeeeee', display: 'block', userSelect: 'none', width: '100%'}} />
      </div>
    );
  }
}