Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-adobe-embed
Advanced tools
react-adobe-embed - npm Package Compare versions
Comparing version 11.2.8 to 11.2.9
@@ -0,0 +0,0 @@ import React from 'react'; |
@@ -0,0 +0,0 @@ import React from "react"; |
@@ -0,0 +0,0 @@ import ReactViewAdobe from './index'; |
@@ -0,0 +0,0 @@ import React from "react"; |
| { | ||
| "name": "react-adobe-embed", | ||
| "version": "11.2.8", | ||
| "version": "11.2.9", | ||
| "homepage": "https://ziping-liu-corporation.github.io/react-adobe-embed/#/home", | ||
@@ -54,3 +54,2 @@ "repository": { | ||
| "main": "lib/bundle.cjs.js", | ||
| "exports": { | ||
@@ -61,3 +60,3 @@ ".": { | ||
| "default": "./dist/react-adobe-embed.cdn.js", | ||
| "umd":"./dist/react-adobe-embed.cdn.js" | ||
| "umd": "./dist/react-adobe-embed.cdn.js" | ||
| } | ||
@@ -129,3 +128,2 @@ }, | ||
| "husky": "^8.0.3", | ||
| "i": "^0.3.7", | ||
| "jest": "^29.7.0", | ||
@@ -157,2 +155,2 @@ "jest-environment-jsdom": "^29.7.0", | ||
| } | ||
| } | ||
| } |
@@ -155,7 +155,82 @@ # [React based ADOBE PDF EMBED API Component Facade](https://ziping-liu-corporation.github.io/react-adobe-embed/) is a Great Tool for Displaying PDF's with rich features, | ||
| ## Installation via CDN | ||
| You can also load this as a CDN script. By default the latest version can be accessed publically via. For now it is only accessible in this manner as a UMD bundle, with access to the default exported React Component. | ||
| You can also load this as a CDN script via [jsdelivr using this link](https://cdn.jsdelivr.net/npm/react-adobe-embed@11.2/dist/react-adobe-embed.cdn.js). By default the latest version can be accessed publically through the CD workflow as well, at [ziping-liu-corporation.github.io/react-adobe-embed/dist/react-adobe-embed.cdn.js](https://ziping-liu-corporation.github.io/react-adobe-embed/dist/react-adobe-embed.cdn.js). For now this CDN bundle is only accessible in the form of a UMD bundle, through a global named `ReactAdobeEmbed` that provides access to the default export from react-adobe-embed, or also known by its name as a named export `ReactViewAdobe`. Below is a sample html file that renders a PDF via react-adobe-embed loaded as a CDN. | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/react-adobe-embed@11.0/dist/react-adobe-embed.cdn.js"> | ||
| <head> | ||
| <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> | ||
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>My PDF Viewer</h1> | ||
| <div id="root"> </div> | ||
| <script src="https://cdn.jsdelivr.net/npm/react-adobe-embed@11.2/dist/react-adobe-embed.cdn.js"> </script> | ||
| <script> | ||
| /** | ||
| * @type {React} ReactCDN | ||
| * In order to use the react-adobe-embed | ||
| * component library, you also need | ||
| * to have loaded React and ReactDOM | ||
| * via CDN as well. This is usually done | ||
| * via a script tag that would be placed before | ||
| * the script tag for react-adobe-embed's cdn. | ||
| * Although the script tags run | ||
| * asynchronously, they are still ran | ||
| * in the order in which they appear | ||
| * within the html file. Ideally, you would place | ||
| * the script tag for React and ReactDOM CDN's | ||
| * in the "head" portion of the html file, | ||
| * while the script tag for react-adobe-embed CDN | ||
| * is placed at the end of the "body" portion | ||
| * of the html file. | ||
| * This ensures that the React and | ||
| * ReactDOM CDN's are loaded before | ||
| * react-adobe-embed. CDN links for React | ||
| * and ReactDOM can be found via React's doc site: | ||
| * https://legacy.reactjs.org/docs/cdn-links.html | ||
| */ | ||
| const ReactCDN = window.React; | ||
| /** | ||
| * @type { import('react-dom/client') } | ||
| */ | ||
| const ReactDOMCDN = window.ReactDOM; | ||
| /** | ||
| * @type {import('react-adobe-embed').default} | ||
| * ReactViewAdobe custom component library | ||
| * loaded via CDN from the above script tag | ||
| * via jsdelivr.net | ||
| */ | ||
| const ReactViewAdobeCDN = window.ReactViewAdobe; | ||
| /** | ||
| * @type { import('react-adobe-embed').ReactViewAdobeProps } | ||
| */ | ||
| const myReactViewAdobeProps = { | ||
| clientId: "324caa2a91b84f688935436cd2d25217", | ||
| url: "https://raw.githubusercontent.com/" + | ||
| "ZipingL/dna/main/23andMe_Ancestry_Book.pdf", | ||
| style: { | ||
| height: "600px", | ||
| width: "100%" | ||
| }, | ||
| fileMeta: { | ||
| fileName: "23andMe Ancestry Book" | ||
| } | ||
| }; | ||
| const CreatedReactComponent = ReactCDN.createElement( | ||
| ReactViewAdobeCDN, | ||
| myReactViewAdobeProps, | ||
| null | ||
| ) | ||
| const rootElement = document.getElementById("root"); | ||
| if (rootElement) { | ||
| const ReactRootFromElement = ReactDOMCDN.createRoot(rootElement); | ||
| ReactRootFromElement.render(CreatedReactComponent); | ||
| } | ||
| </script> | ||
| </body> | ||
| ``` | ||
| - An example of loading `react-adobe-embed` and utilizing it as a cdn is currently part of the testing endpoint. | ||
| - An example of loading `react-adobe-embed` and utilizing it as a cdn is currently part of the testing endpoint used as part of the continuous integration workflow that is active for this package. | ||
| - The **testing endpoint code** can be viewed at [canary/routes/CDN.tsx](https://github.com/ZIPING-LIU-CORPORATION/react-adobe-embed/blob/slave/canary/routes/CDN.tsx) | ||
@@ -230,3 +305,3 @@ - The deployed **testing endpoint code** can be viewed at [ziping-liu-corporation.github.io/#/cdn](https://ziping-liu-corporation.github.io/react-adobe-embed/#/cdn) | ||
| ### What's the NPM page? | ||
| - [](https://socket.dev/npm/package/react-adobe-embed), is a pretty decent way to view the NPM releases. | ||
| - [](https://socket.dev/npm/package/react-adobe-embed), is a pretty decent way to view the NPM releases, or perhaps you might find [](https://www.jsdelivr.com/package/npm/react-adobe-embed) more useful. | ||
| ### Are you or is this wrapper thing affialated with Adobe Developer or Adobe? | ||
@@ -233,0 +308,0 @@ ``` |
@@ -0,0 +0,0 @@ { |
@@ -0,0 +0,0 @@ import React from "react"; |
@@ -0,0 +0,0 @@ import ReactViewAdobe from './index'; |
@@ -0,0 +0,0 @@ import React from "react"; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.88%
90548
- Dev dependency count
- decreased by-1.59%
62
- Number of lines in readme file
- increased by31.78%
311
Worsened metrics
- Number of package files
- decreased by-18.92%
30
- Lines of code
- decreased by-1.43%
895
No dependency changes