react-base64-to-pdf

react-base64-to-pdf

A React component library for displaying, previewing, and downloading Base64-encoded PDF files. Easily integrate PDF viewing capabilities into your React applications.

Installation

You can install the package using npm:

npm install react-base64-to-pdf

Usage

Here’s a quick example of how to use the react-base64-to-pdf library in your React application.

Basic Example

import React, { useEffect, useState } from "react";
import { PDFInfo, PDFPreview, PDFDownloadButton } from 'react-base64-to-pdf';

const App = () => {
  const base64Pdf = 'JVBERi0xLjUKJYCBgoMKMSA.....'; // Your Base64-encoded PDF string

  return (
    <div>
      <h1>PDF Viewer Example</h1>
      
      {/* Show PDF Preview */}
      <PDFPreview base64={base64Pdf} style={{width: 100vw, height : 100vh}} className="yourClassNameGoesHere"/>

      {/* Show PDF Information */}
      <PDFInfo base64={base64Pdf} />

      {/* Download PDF Button */}
      <PDFDownloadButton 
        base64={base64Pdf} 
        downloadFileName="your-file.pdf"
        style={{
          backgroundColor: 'blue',
          color: 'white',
          padding: '10px 20px',
          borderRadius: '5px',
          textDecoration: 'none'
        }}
      />
    </div>
  );
};

export default App;

Components

PDFInfo

Description: This component displays essential information about the PDF file, including its file size, PDF version, creation date, modification date, and the tool used to create it.

Props:

• base64 (string): The Base64-encoded string of the PDF file.

PDFPreview

Description: This component renders a visual preview of the PDF file, allowing users to view its contents directly within the application.

Props:

• base64 (string): The Base64-encoded string of the PDF file.
• style (React.CSSProperties, optional): Custom styles for the preview component, specified as an object (e.g., style={{...}}).
• className (string, optional): Additional CSS class names for styling.

PDFDownloadButton

Description: This component provides a button that users can click to download the PDF file.

Props:

• base64 (string): The Base64-encoded string of the PDF file.
• downloadFileName (string, optional): The name for the downloaded file. If not provided, the default name is file.pdf.
• style (React.CSSProperties, optional): Custom styles for the button.
• className (string, optional): Additional CSS class names for further customization.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any inquiries or feedback, feel free to reach out at 28priyanshu2001.