react-adobe-embed
Advanced tools
Readme
Ziping Liu really enjoys using Adobe Acrobat DC Pro ever since having the chance to use it for the first time when I interned at a law firm. In case you want to use it with React with a bit more Typescript This Wrapper allows Adobe PDF Embed to work great with React 18 and Typescript
| Canary Hearbeat Status | Alarm on Code Push for React-Adobe-Embed | Integration/Unit Test on Code Push | Development Coding Effort |
|
|
|
|
Through live heartbeat monitoring the react component as well as the external api service used, as well as via standard integartion testing, that provides full CD/CI coverage of react-adobe-embed. Further details regarding CD to be provided.
npm install react-adobe-embedyarn add react-adobe-embedimport React from 'react';
import ReactViewAdobe from 'react-adobe-embed'
const App = () => {
return(
<ReactViewAdobe
/**
* You can use the clientId below given that it only works
* on http://localhost:80.
* In order to generate your own clientId that is set with a configured
* application domain,(e.g. yourappwithadobeembedstuff.com),
* visit: https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main
*/
clientId="324caa2a91b84f688935436cd2d25217"
title="A Story of Wages"
url={"https://storage.googleapis.com/laotzu/awslegal/"
+ "notarized/EXHIBIT_"
+ "A_Story%20of%20WagesOFNONPAIDAges_encrypted_.pdf"}
/**
* This id must be unique to the pdf it is supposed to render,
* as part of requirements from adobe embed's api
*/
id="exhbit-a-pdf"
fileMeta={{
fileName: "A Story of Wages"
}}
previewConfig={{
defaultViewMode: "FIT_WIDTH",
showAnnotationTools: false,
showPageControls: false,
showDownloadPDF: false
}}
style={{
height: "50vh"
}}
/>
) }
import React from 'react';
import ReactViewAdobe from 'react-adobe-embed'
const App = () => {
const [viewDocumentTriggered, setViewDocumentTriggered] = React.useState(false);
return (
<div>
<button onClick={(e)=>{
e.preventDefault();
setViewDocumentTriggered(true);
}}>
View Document
</button>
<ReactViewAdobe
triggerAdobeDCViewRender={viewDocumentTriggered}
clientId="324caa2a91b84f688935436cd2d25217"
title="A Story of Wages"
url={"https://storage.googleapis.com/laotzu/awslegal/"
+ "notarized/EXHIBIT_"
+ "A_Story%20of%20WagesOFNONPAIDAges_encrypted_.pdf"}
/**
* This is required and must be unique because adobe devs are coupled like that
*/
id="exhbit-a-pdf"
fileMeta={{
fileName: "A Story of Wages"
}}
previewConfig={{
"embedMode": "LIGHT_BOX"
}}
/>
</div>
)
}
You can also load this as a CDN script via jsdelivr through their version aliased delivery here. Also, 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.
For now this CDN bundle is only accessible in the form of a UMD bundle, through a global named
ReactViewAdobe(and accessible viawindow.ReactViewAdobe) that provides access to the default export fromreact-adobe-embedpackage, or also known by its name as a named exportReactViewAdobe.
html which renders a PDF via react-adobe-embed loaded as a CDN<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>
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.
Note: these other steps below are no longer required but remain to provide insight on how react-adobe-embed handles adobe embed api
2.As the current implementation of creating LIGHT_BOX embed pdf's is quite complicated, you can view a live code example of how to use LIGHT_BOX mode with react-adobe-embed here
3. Note on adobe sdk<script>tag:
- You don't need to worry about handling outside script tags. The react wrapper handles any script downloading. Simple call the React Component as shown above.
In the past it was this:<script src='https://documentcloud.adobe.com/view-sdk/main.js'></script>as instructed by their office docs.
If you use this URL right now however: it will give you an error saying to update your PDF Viewer. I saw the error on Nov 28th myself and asked myself... This is an embed PDF viewer, i shouldn't need to update anything.Anyways, the URL has been updated above in step 1.Since I guess Adobe just likes to change the URL to whatever they want, you can find the correct URL to use to include their ADOBE MAGIC STUFF here.- I don't know why but the folks at Adobe decided to change the script URL, and then also change the global variable name used to store the Adobe api methods, this has ulimately caused this npm package as actually a broken useless wrapper... so why didn't anyone add to the discussion board to let me know? Seriously? Just literally next time say, hey idiot your code is broken. I won't be offended. It's just code dude.
Cannot read properties of undefined (reading 'View')
LicenseVerificationService.js:32 POST https://viewlicense.adobe.io/viewsdklicense/jwt 401 (Unauthorized) (The pdf renders then immediately disappears for no apparent reason)
Given the increasing intricacy of this wrapper, it is imperative to safeguard the fundamental functionality from any potential disruption caused by new code alterations. At present, a rudimentary examination is conducted to verify the wrapper's capability to accurately display the PDF content while effectively handling asynchronous requests to the Adobe PDF Embed API.
This test runs as a github action whenever a code change occurs. Note, these tests only test the react code within, and thus mocks out any calls to adobe's embed api service.
npm run test
PASS src/__tests__/base.test.tsx
BasicRender
✓ should render the component (23 ms)
✓ should re-render the component when component props updated (18 ms)
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 2 passed, 2 total
Time: 1.699 s
Ran all test suites.
The end to end tests which includes testing of the react-adobe-embed react component and the proper usage and response from the adobe embed api service is handled in a seperate repository, react-adobe-embed-cd-canary.
Note: Further details including the testing architecture that allows for then a continuous dpeloyment and integartion of the react-adobe-embed component will be added. Please see the FAQs below
Adobe, with its renowned symbols such as Acrobat, the Adobe PDF insignia, Adobe Premiere, Creative Cloud, InDesign, and Photoshop, are acknowledged trademarks of Adobe, registered in the United States and/or other jurisdictions. Ziping Liu Corporation, a trademark registered in the United States, and LIU LLC, incorporated under the laws of the State of Texas, are also part of our respected portfolio. At this moment, we have no additional public declarations to make or inquiries to address on this matter.
Ziping LIU Corporation, overseeing Adobe code, is proud to unveil an innovative Nested React Component, aptly named 'ReactViewAdobe'. This component is a result of careful engineering, designed with the specific aim of managing the API calls and configurations associated with the Adobe Embed API SDK. This component, in its profound wisdom, employs React Hooks, thereby transforming what the Adobe Embed API SDK perceives as static and unadorned JavaScript code into an elegantly transposed representation in the Document Object Model (DOM). This is a testament to our commitment to innovation and growth in the ever-evolving digital landscape, or alternatively, necessary code scaffolding to allow for Adobe's complex API to function properly in modern frameworks.
FAQs
React Adobe Embed Custom Component for Adobe PDF Embed API allows you to embed a PDF viewer in your web applications with only a few lines of code. With options for controlling how a PDF appears and functions, your applications can deliver the rich and co
The npm package react-adobe-embed receives a total of 179 weekly downloads. As such, react-adobe-embed popularity was classified as not popular.
We found that react-adobe-embed demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.