Skip to content

react.md

Latest commit

 

History

History
171 lines (127 loc) · 3.69 KB

react.md

File metadata and controls

171 lines (127 loc) · 3.69 KB
layout default-layout
needAutoGenerateSidebar true
needGenerateH3Content true
noTitleIndex true
title React Document Viewer - Dynamsoft Document Viewer Documentation
keywords Documentation, Dynamsoft Document Viewer, PDF, Getting Started, React
breadcrumbText React
description Learn how to integrate Dynamsoft Document Viewer into your React project with this step-by-step guide.

How to Integrate Document Viewer into a React Project

This guide will show you how to integrate Dynamsoft Document Viewer into a React project.

You can can download the sample on GitHub:

DownloadReact Helloworld

Preparation

Make sure you have node installed.

New Project

Create a new React project.

npm create vite@latest ddv-react -- --template react

Add Dependencies

  1. Install Dynamsoft Document Viewer.

    npm install dynamsoft-document-viewer

  2. Copy the resources of Dynamsoft Document Viewer into the public folder.

    1. Install rollup-plugin-copy as devDependencies.

      npm install rollup-plugin-copy --save-dev

    2. Modify vite.config.js to copy the resources.

      import copy from "rollup-plugin-copy";
export default defineConfig({
  plugins: [
    copy({
      targets: [
        {
          src: "node_modules/dynamsoft-document-viewer/dist",
          dest: "public/dynamsoft-document-viewer",
        },
      ],
      hook: "buildStart",
    }),
    react()
  ],
})

Create a Document Viewer Component

  1. Create a viewer component file under src\components\Viewer.jsx.

  2. Add the following content in the component file. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on this page.

    import { useEffect } from 'react'
import { DDV } from 'dynamsoft-document-viewer'
import "dynamsoft-document-viewer/dist/ddv.css"
import "./Viewer.css"
export default function Viewer() {
  const init = async () => {
    DDV.on('error', (e) => {
      alert(e.message)
    })
  
    // Public trial license which is valid for 24 hours
    DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
    DDV.Core.engineResourcePath = "/dynamsoft-document-viewer/dist/engine";
    // Preload DDV Resource
    DDV.Core.loadWasm();
    await DDV.Core.init();

    const viewer = new DDV.EditViewer({
      container: 'container'
    });
  }

  useEffect(() => {
    init();
  },[])

  return (
    <div id="container"></div>
  )
}

    Viewer.css:

    #container {
  width: 100%;
  height: 100%;
}

Use the Document Viewer Component

Open App.jsx and add the viewer component.

import './App.css'
import Viewer from './components/Viewer'

function App() {
  return (
    <>
      <h1>Hello World for React + Vite</h1>
      <Viewer />
    </>
  )
}

export default App

App.css:

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px 8px 8px 8px;
  box-sizing: border-box;
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

Run the app using the following command and you should see the viewer mounted in your application!

npm run dev

Other Samples

You can find other samples on this GitHub repo.