Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-to-print

Package Overview
Dependencies
Maintainers
2
Versions
91
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-to-print

Print React components in the browser

  • 3.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
510K
decreased by-10.37%
Maintainers
2
Weekly downloads
 
Created

What is react-to-print?

The react-to-print npm package allows you to easily print React components. It provides a simple way to trigger the print functionality for specific parts of your application, making it useful for generating printable content from your React components.

What are react-to-print's main functionalities?

Basic Printing

This feature allows you to print a specific React component. The `ReactToPrint` component takes a `trigger` prop, which is a function that returns a React element to trigger the print action, and a `content` prop, which is a function that returns the component to be printed.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

class ComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>This is a printable component.</p>
      </div>
    );
  }
}

const MyComponent = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

export default MyComponent;

Custom Styling for Print

This feature allows you to apply custom styles to the printed content. The `pageStyle` prop can be used to define CSS styles that will be applied when printing.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

class ComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h1 style={{ color: 'red' }}>Hello World!</h1>
        <p>This is a printable component with custom styles.</p>
      </div>
    );
  }
}

const MyComponent = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
        pageStyle="@page { size: auto;  margin: 20mm; } @media print { body { -webkit-print-color-adjust: exact; } }"
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

export default MyComponent;

Handling Print Callbacks

This feature allows you to handle callbacks before and after the print action. The `onBeforePrint` and `onAfterPrint` props can be used to execute functions at these stages.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

class ComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>This is a printable component.</p>
      </div>
    );
  }
}

const MyComponent = () => {
  const componentRef = useRef();
  const handleBeforePrint = () => {
    console.log('Before print');
  };
  const handleAfterPrint = () => {
    console.log('After print');
  };
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
        onBeforePrint={handleBeforePrint}
        onAfterPrint={handleAfterPrint}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

export default MyComponent;

Other packages similar to react-to-print

Keywords

FAQs

Package last updated on 17 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc