Packages
Helper
React
- PDF Loader : react-pdf
- Viewport Focus Detect : react-intersection-observer
- Drag and Drop : react-beautiful-dnd: example
- Web Code Editor : react-ace
- Graph Editor : react-flow
Others
- Timeline : animejs
- Debug GUI : dat.gui
- Download File : file-saver
- Image Affine Transform : homography
- Resoucre Monitor : stats.js
- Code Compare Editor: ace-editor
- Unused File Scanner: unimported
- country-calling-code: country code mapping table
- dom-to-svg: convert a given HTML DOM node into an accessible SVG "screenshot".
- svg2pdf.js: a javascript-only SVG to PDF conversion
- ELK's layout algorithms for JavaScript
- BotD: Bot detection library that runs in the browser
Examples
Download File : file-saver
import { saveAs } from 'file-saver';
const blob = new Blob( [ JSON.stringify( json ) ], { type: "application/json" } );
saveAs( blob, "media.json" );
DOMPurify
import DOMPurify from 'dompurify'
const App = () => {
const data = `lorem <b onmouseover="alert('mouseover');">ipsum</b>`
const sanitizedData = {
__html: DOMPurify.sanitize(data)
}
return (
<div
dangerouslySetInnerHTML={sanitizedData}
/>
);
}
export default App;
PDF Loader : react-pdf
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
export const getDocDataURL = async (doc) => {
try {
const data = await doc.getData();
const blob = new Blob([data], { type: "application/pdf" });
const pdfDataUrl = URL.createObjectURL(blob);
return pdfDataUrl;
} catch (err) {
console.log(err);
return null;
}
};
export const getDoc = async (url, onProgress, onLoad, onError) => {
try {
const loadingTask = pdfjs.getDocument({ url });
if (onProgress)
loadingTask.onProgress = ({ loaded, total }) => {
const percentage = loaded / total;
onProgress(percentage);
if (percentage === 1) {
loadingTask.onProgress = null;
}
};
const doc = await loadingTask.promise;
if (onLoad) onLoad(doc);
return doc;
} catch (err) {
console.log(err);
if (onError) onError(err);
return null;
}
};
/* usage
const doc = await getDoc("/sample.pdf"); // PDFDocumentProxy, look pdfjs document for detail.
const dataURL = await getDocDataURL(doc); // blob:https://kdan-demo-op.dottedsign.com/5c46d654-f02e-4938-97bd-6676451f2c0f
import { Document } from "react-pdf";
<Document file={dataURL} ... />
*/