SenseNet/sn-client

import React, { useState } from "react";
import {
  defaultTheme,
  DocumentTitlePager,
  DocumentViewer,
  LayoutAppBar,
  RotateActivePagesWidget,
  SaveWidget,
  SearchBar,
  ToggleCommentsWidget,
  ToggleShapesWidget,
  ToggleThumbnailsWidget,
  ZoomInOutWidget,
  ZoomModeWidget
} from "@sensenet/document-viewer-react";
import { MuiThemeProvider } from "@material-ui/core/styles";
import { RepositoryContext } from "@sensenet/hooks-react";
import { Repository } from "@sensenet/client-core";
export const ViewerExample: React.FC = () => {
  const [repository, setRepository] = useState(
    new Repository({ repositoryUrl: hostName })
  );
  return (
    <MuiThemeProvider theme={defaultTheme}>
      <RepositoryContext.Provider value={repository}>
        <DocumentViewer
          theme={defaultTheme}
          documentIdOrPath={
            "/Root/Content/IT/Document_Library/Brazzaville/100pages.pdf"
          }
        >
          <LayoutAppBar>
            <div>
              <ToggleShapesWidget />
              <ToggleThumbnailsWidget />
              <ZoomInOutWidget />
              <ZoomModeWidget />
              <RotateActivePagesWidget />
              <SaveWidget />
            </div>
            <DocumentTitlePager />
            <div>
              <ToggleCommentsWidget />
              <SearchBar />
            </div>
          </LayoutAppBar>
        </DocumentViewer>
      </RepositoryContext.Provider>
    </MuiThemeProvider>
  );
};