https://github.com/husna-poyraz/react-to-pdf

ReactToPrint - Print React components in the browser
https://github.com/husna-poyraz/react-to-pdf

javascript react react-to-print

Last synced: about 1 month ago
JSON representation

ReactToPrint - Print React components in the browser

• Host: GitHub
• URL: https://github.com/husna-poyraz/react-to-pdf
• Owner: Husna-POYRAZ
• Created: 2022-11-02T17:25:11.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-02T17:45:22.000Z (almost 3 years ago)
• Last Synced: 2025-02-26T11:33:39.363Z (8 months ago)
• Topics: javascript, react, react-to-print
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# How to print in React.js?

Example page:



![1](https://user-images.githubusercontent.com/75911392/199562793-74bfa597-2413-4984-8ba9-be9f7714bbc9.png)

When "Print this out!" button click:



![2](https://user-images.githubusercontent.com/75911392/199563036-16844d77-549e-4682-be08-336076277a28.png)

## Step by Step Project

## 1- Requirments

* cmd: npm install --global yarn


* cmd: yarn global add npx

## 2- Creat Project

* cmd: npx creat-react-app my-project

* cmd: cd project-path

* cmd: yarn start

## 3- Download package

* cmd: npm i react-to-print

* package source: https://www.npmjs.com/package/react-to-print

## 4- Import project

```

import ReactToPrint from 'react-to-print';

```

## 5- Create class/function etc. for web page

* Example:

```

class ComponentToPrint extends React.Component {

  render() {

    return (

      

      

        Name

        Age

        Gender

      

      

        Anom

        19

        Male

      

      

        Megha

        19

        Female

      

      

        Subham

        25

        Male

      

    

    )

  }

}

```

## 6- Add react to print

* Example:

```

class Example extends React.Component {

  render () {

    return (

      


         {

          return Print this out!;

        }}

        content={() => this.componentRef}

      />


       (this.componentRef = el)}/>

      

    );

  }

}

```

## 7- Render

```

render(, document. querySelector("#root"));

```