Skip to content

Latest commit

 

History

History
182 lines (138 loc) · 9.93 KB

README.md

File metadata and controls

182 lines (138 loc) · 9.93 KB
Raw

React PushPrintComponents

License

PushPrintComponents is a versatile React component designed to enhance your web applications with printing and PDF generation capabilities. Utilizing the jsPDF library, it captures the current view of a component, enabling it to be printed directly from the browser or saved as a PDF. This makes it an ideal solution for generating reports, invoices, or any content that requires hard copies or digital preservation.

Features

  • Direct Printing: Enables direct printing of specific components within your web application, using a customizable trigger.
  • PDF Generation: Converts the current view of a component into a PDF file, facilitating easy saving, sharing, or further processing.
  • Customizable Triggers: This feature enables the creation of personalized triggers for starting the printing process, generating PDFs, and previewing documents. It also allows for the submission of additional fields along with the PDF.
  • Styling Support: Allows for the application of a custom class to the print container, offering styling flexibility..
  • PDF Handling Callback: Supports a callback function for post-PDF generation, allowing for additional handling like local saving or API integration.

New Features in PushPrintComponents

  • showPreviewTrigger: A React component or element used as a trigger for preview screen.
  • Preview Options: Offers a comprehensive suite of configurations for preview functionality, including customizable form fields for data submission, UI customization through class names, and specific action triggers (onSubmit, onCancel) for enhanced interaction.
  • Form Fields Customization: Enable dynamic creation of form fields within the preview modal, supporting various field types (text, number, email, etc.) with validation rules, allowing for a richer data collection process before PDF generation or printing.
  • Enhanced Triggers: Introduces distinct React components or elements as triggers for printing, PDF generation, and preview display, enriching user interaction and process initiation.
  • Detailed PDF Customization: Facilitates naming the generated PDF file, customizing the submit and cancel button texts in the preview modal, and providing hooks for submission and cancellation actions.

Installation

To install the component in your project, run the following command:

Run npm install react-pushpdf-or-print-components

Usage

The example below demonstrates how to integrate PushPrintComponents into your React application, showcasing setup for print, PDF generation triggers, preview options, and handling the generated PDF through callback functions.

import React from 'react';
import ReactDOM from 'react-dom';
import PushPrintComponents, { FormField, previewOptions } from 'react-pushpdf-or-print-components';

function App() {
  const previewOptions = {
    formFields: [
      { name: 'name', type: 'text', label: 'Name', validation: { required: true } },
      { name: 'date', type: 'date', label: 'Date' }
    ],
    title: 'Preview Title',
    description: 'Please fill out the form',
    pdfFileName: 'custom-file-name.pdf',
    submitButtonText: 'Submit',
    cancelButtonText: 'Cancel',
    onSubmit: (data) => {
      console.log('Form Data:', data);
    },
    onCancel: () => {
      console.log('Preview Cancelled');
    }
    width: '80%',
    left: '10%'
  };

  return (
    <PushPrintComponents
      printTrigger={<button>Print Content</button>}
      generatePdfTrigger={<button>Generate PDF</button>}
      showPreviewTrigger={<button>Show Preview</button>}
      previewOptions={previewOptions}
      className="custom-print-class"
      onPdf={(pdf) => {
        // Further actions with the generated PDF
      }}
      style={{ fontSize: '16px' }}
    >
      <div>
        Content to be printed or saved as PDF.
      </div>
    </PushPrintComponents>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

PushPrintComponents

React component called PushPrintComponents that provides functionality for printing content, generating PDFs, and displaying a preview form with customizable options.

Name Type Description
trigger function A React component or element used as a trigger for initiating the print process.
generatePdfTrigger function A React component or element used as a trigger for generating a PDF.
showPreviewTrigger function A React component or element used as a trigger for displaying the preview screen with provided form fields in previewOptions.
previewOptions object An object containing the configuration for the share preview form, including title, form fields, and action triggers.
className string An optional class name to apply to the print container for custom styling.
onPdf function A callback function that receives the generated PDF object for additional processing.
style object An optional object containing custom styles to apply to the print container. (fontSize will act as main font size for the print container)

previewOptions Configuration

The previewOptions configuration allows for detailed customization of the share preview form, including:

Name Type Description
title string Set the title of the share preview window.
formFields object Define the fields in the form, their types, default values, and validation rules.
description string Provide a description or instructions for the form.
pdfFileName string Set the name of the generated PDF file.
submitButtonText string Customize the text for the submit button in the preview form.
cancelButtonText string Customize the text for the cancel button in the preview form.
onSubmit function Define a custom function to handle the form submission.
onCancel function Define a custom function to handle the form cancellation.

Other minimal configurations on previewOptions

Name Type Description
width string Set the width of the share preview window along with % symbol. example: 80%
left string Set the left position of the share preview window along with % symbol. example: 10%

formFields Configuration

The formFields configuration allows for dynamic creation of form fields within the preview modal, supporting various field types (text, number, email, etc.) with validation rules, allowing for a richer data collection process before PDF generation or printing.

Name Type Description
name string The name of the form field.
type string The type of the form field (text, number, email, etc.).
label string The label for the form field.
validation object An object containing validation rules for the form field (e.g., required: true).
defaultValue string The default value for the form field.
rows number The number of rows for a textarea field.

validation Configuration

The validation configuration allows for setting validation rules for form fields, including required fields, pattern matching, minimum and maximum lengths, and minimum and maximum values.

Name Type Description
required boolean A boolean value indicating whether the field is required.
pattern string A regular expression pattern for pattern matching.
minLength number The minimum length for the field value.
maxLength number The maximum length for the field value.
min number The minimum value for number fields.
max number The maximum value for number fields.

Contributing

We welcome contributions from the community. Please refer to our contributing guidelines for more information.

License

This project is licensed under the terms of the MIT license.

Credits

This project was bootstrapped with [Create React App]

Support

For any questions or support, please contact us at kishorechandra.developer@gmail.com