pdf-reader-web/components/Viewer/index.tsx

import React, { forwardRef } from 'react';

import { OuterWrapper, Wrapper } from './styled';

type Props = {
  children: React.ReactNode;
  viewport: ViewportType;
  rotation: number;
  displayMode: string;
};
type Ref = HTMLDivElement;

const Viewer = forwardRef<Ref, Props>(
  ({ children, viewport, rotation, displayMode }: Props, ref) => {
    const width =
      (Math.abs(rotation) / 90) % 2 === 1 ? viewport.height : viewport.width;

    return (
      <OuterWrapper id="pdf_viewer" ref={ref} isFull={displayMode === 'full'}>
        <Wrapper width={width}>{children}</Wrapper>
      </OuterWrapper>
    );
  }
);

export default Viewer;