{"id":20393360,"url":"https://github.com/foxitsoftware/create-react-app-hook-example","last_synced_at":"2026-02-28T10:06:49.278Z","repository":{"id":75785208,"uuid":"389580687","full_name":"foxitsoftware/Create-react-app-hook-Example","owner":"foxitsoftware","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-18T01:57:46.000Z","size":234,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-18T02:38:33.578Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foxitsoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-07-26T09:35:59.000Z","updated_at":"2025-06-18T01:57:50.000Z","dependencies_parsed_at":"2024-06-14T08:31:52.167Z","dependency_job_id":"071aeb4e-79a6-4187-a324-5b99c7a708e0","html_url":"https://github.com/foxitsoftware/Create-react-app-hook-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/foxitsoftware/Create-react-app-hook-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-hook-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-hook-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-hook-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-hook-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxitsoftware","download_url":"https://codeload.github.com/foxitsoftware/Create-react-app-hook-Example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-hook-Example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29929677,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T09:58:13.507Z","status":"ssl_error","status_checked_at":"2026-02-28T09:57:57.047Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T03:48:22.924Z","updated_at":"2026-02-28T10:06:49.270Z","avatar_url":"https://github.com/foxitsoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Foxit PDF SDK for Web Example - React.js created by \"create-react-app\" (React hook)\n\nThis guide shows two examples. One introduces how to quickly run the out-of-the-box sample for react.js created by \"create-react-app\" in Foxit PDF SDK for Web package, and the other presents a way to integrate Foxit PDF SDK for Web into React app created by \"create-react-app\".\n\n## Quickly run the out-of-the-box sample for Create-react-app-hook-Example\n\n_Note:The root folder of `Foxit PDF SDK for Web` is referred as `root` in the following._\n\nFoxit PDF SDK for Web provides a boilerplate project for React app which was created by \"create-react-app\".\n\n### Overview the project structure\n\n```bash\n├─public\n│   └── index.html\n├─src/\n│  ├─components/\n│  │  └─PDFViewer/\n│  ├─App.css\n│  ├─App.js\n│  ├─index.css\n│  ├─index.js\n│  ├─license-key.js\n│  └──preload.js\n├─.eslintignore\n├─config-overrides.js\n├─package.json\n```\n\n#### Key directory and files descriptions\n\n|        File/Folder        |                                        Description                                        |\n| :----------------------- | :--------------------------------------------------------------------------------------- |\n|           src/            |                        Contains all JS and CSS files for the app.                         |\n| src/components/PDFViewer/ |                Contains the initilization plugins for FoxitPDFSDK for Web.                |\n|      src/preload.js       |                     This entry point used to preload SDK core assets.                     |\n|      src/license-key.js   |                     The license-key                    |\n|        src/App.js         |                             The entry point for application.                              |\n|       config-overrides.js        |                 Adjust the Webpack configuration                   |\n|       package.json        |                  Lists dependencies, version build information and ect.                   |\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [yarn](https://yarnpkg.com/getting-started/install)\n- [Foxit PDF SDK for Web](https://developers.foxit.com/products/web/)\n\n### Getting started\n\nLet's call the *Foxit PDF SDK for Web* as SDK.\n\n- Clone this repository to any location\n  \n  ```bash\n  git clone https://github.com/foxitsoftware/Create-react-app-hook-Example.git\n  ```\n\n- Place the `license-key.js` into `./src/`, You can find the license information at `SDK/examples/`.\n\n- Navigate to `./Create-react-app-hook-Example` folder, and execute:\n\n```bash\n    yarn \n    yarn start\n```\n\nNow everything is set up. Open your browser, navigate to \u003chttp://localhost:3000/\u003e to launch this application.\n\n### Reference the fonts\n\nIf some text in a PDF document requires a specified font to be rendered correctly, you need to specify a font loading path during initialization. In this example, you can refer to the `fontPath` configuration in `src/preload.js`. What we need to do is to copy the `external` folder in the SDK to the `public` folder so that the special font can be rendered normally.\n\n### Reference the `Service-Worker-Allowed` HTTP header\n\nStarting from FoxitPDFSDK for Web version `10.0.0`, since service worker is used, it is necessary to add this field in the HTTP response header of the Service Worker script. Its value is the maximum allowed scope path:\n\n```http\nService-Worker-Allowed /;\n```\n\n#### Nginx 配置示例\n\nIf you are using Nginx as your server, you can add the `Service-Worker-Allowed` response header by modifying the Nginx configuration file. Below is an example configuration：\n\n```nginx\nserver {\n    location /sw.js {\n        add_header Service-Worker-Allowed /;\n    }\n}\n```\n\n#### Webpack Dev Server 配置示例\n\nIf you use Webpack Dev Server for local development, you can add `Service-Worker-Allowed` response headers by configuring devServer. The following is a configuration example：\n\n```js\n// webpack.config.js\nmodule.exports = {\n    // 其他配置\n    devServer: {\n        headers: {\n            'Service-Worker-Allowed': '/'\n        }\n    }\n};\n```\n\n## Integrate Web SDK to react app created by \"create-react-app\"\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [yarn](https://yarnpkg.com/getting-started/install)\n- [Reac.js created by create-react-app](https://reactjs.org/docs/create-a-new-react-app.html)\n- [Foxit PDF SDK for Web](https://developers.foxit.com/products/web/)\n\n### Getting started\n\n1. Create the React app with \"create-react-app\":\n\n   ```bash\n   npx create-react-app app\n   ```\n\n2. In `app` folder, Update `package.json`:\n\n    ```json\n    \"scripts\": {\n        \"start\": \"react-app-rewired --max_old_space_size=8192 start\",\n        \"build\": \"react-app-rewired --max_old_space_size=8192 build\",\n        \"test\": \"react-app-rewired --max_old_space_size=8192 test --env=jsdom\",\n        \"eject\": \"react-app-rewired --max_old_space_size=8192 eject\"\n    },\n    ```\n\n3. In `app` folder, add `config-overrides.js`:\n\n   ```js\n    const CopyWebpackPlugin = require(\"copy-webpack-plugin\");\n    const { override, addWebpackPlugin, addWebpackExternals} = require('customize-cra');\n    const path = require(\"path\")\n    \n    const libraryModulePath = path.resolve('node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library');\n    const libPath = path.resolve(libraryModulePath, 'lib');\n    \n    module.exports = override(\n        addWebpackPlugin(\n            new CopyWebpackPlugin({\n                patterns: [{\n                    from: libPath,\n                    to: 'foxit-lib',\n                    force: true\n                }]\n            })\n        ),\n        addWebpackExternals(\n            'UIExtension', \n            'PDFViewCtrl'\n        )\n    )\n   ```\n\n4. In `src` folder, add `license-key.js`, copy the content below to that file and fill in the License's KEY and SN fields.\n\n    ```js\n    export const licenseKey = '';\n    export const licenseSN = '';\n    ```\n\n5. In `src` folder, add `preload.js`:\n\n   ```js\n    import preloadJrWorker from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/preload-jr-worker';\n    import { licenseKey, licenseSN } from './license-key';\n    \n    const libPath = \"/foxit-lib/\"\n    \n    window.readyWorker = preloadJrWorker({\n        workerPath: libPath,\n        enginePath: libPath+'/jr-engine/gsdk',\n        fontPath: '/external/brotli',\n        licenseSN,\n        licenseKey,\n    });\n   ```\n\n6. Copy the `external` folder inside SDK to `public` folder.\n7. In `src/index.js` file, import `preload.js`:\n\n    ```js\n     import './preload.js'\n    ```\n\n8. In `src` folder, add `components/PDFViewer/index.js`:\n\n   ```js\n    import React, { createRef, forwardRef, useImperativeHandle, useRef } from 'react';\n    import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js';\n    import \"@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css\";\n    import * as Addons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.js';\n    import * as mobileAddons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.mobile.js';\n\n\n    function PDFViewer(props, ref) {\n        const viewerContainerRef = useRef(null);\n\n        const pdfuiInstanceRef = createRef();\n\n        useImperativeHandle(ref,() =\u003e {\n            if(window.pdfui){\n                pdfuiInstanceRef.current = window.pdfui\n                return pdfuiInstanceRef.current\n            }\n            const renderTo = viewerContainerRef.current;\n            const libPath = \"/foxit-lib/\";\n            const pdfui = new UIExtension.PDFUI({\n                viewerOptions: {\n                    libPath,\n                    jr: {\n                        readyWorker: window.readyWorker\n                    },\n                    ...(props.viewerOptions || {})\n                },\n                renderTo: renderTo,\n                appearance: UIExtension.appearances.adaptive,\n                addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile? mobileAddons:Addons\n            });\n            window.pdfui = pdfuiInstanceRef.current = pdfui;\n            return pdfui;\n        });\n        \n        return \u003cdiv className = \"foxit-PDF\" ref = { viewerContainerRef } /\u003e;\n    }\n    export default forwardRef(PDFViewer);\n   ```\n\n9.  Update `App.js`:\n\n    ```js\n    import { useEffect, useRef } from 'react';\n    import './App.css';\n    import PDFViewer from './components/PDFViewer';\n\n    function App() {\n        const pdfuiRef = useRef(null);\n        useEffect(() =\u003e {\n            const pdfui = pdfuiRef.current;\n            if(!pdfui) {\n                return;\n            }\n            // Here, you can do anything with the pdfui instance.\n            function handleWindowResize() {\n                pdfui.redraw();\n            }\n            window.addEventListener('resize', handleWindowResize);\n            return () =\u003e {\n                // Here, you can perform any destruction actions.\n                window.removeEventListener('resize', handleWindowResize);\n            };\n        }, [pdfuiRef]);\n        const externalViewerOptions = {\n            // more viewer options\n        };\n        return (\n            \u003cdiv className=\"App\"\u003e\n                \u003cPDFViewer ref={pdfuiRef} viewerOptions={externalViewerOptions}\u003e\u003c/PDFViewer\u003e\n            \u003c/div\u003e\n        );\n    }\n\n    export default App;\n\n    ```\n\n10. Update App.css\n\n    ```css\n    #root,.App,.foxit-PDF{\n        height: 100%;\n    }\n    ```\n\n11. Install dependencies and run:\n\n    ```bash\n    cd app\n    yarn add @foxitsoftware/foxit-pdf-sdk-for-web-library \n    yarn add copy-webpack-plugin@6.4.1 customize-cra@1.0.0 react-app-rewired@2.1.8 -D\n    yarn start\n    ```\n\nNow everything is set up. Open your browser, navigate to \u003chttp://localhost:3000/\u003e to launch your application.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Fcreate-react-app-hook-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxitsoftware%2Fcreate-react-app-hook-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Fcreate-react-app-hook-example/lists"}