React PushPrintComponents

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 [email protected]