Packages

Helper

React

Others

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} ... />
*/