React-Printer is a simple react component for partial printing on the browser
NPM
npm i -S @eyelly/react-printer
CDN
<script src="https://unpkg.com/@eyelly/react-printer/dist"></script>In Module
import React, { useRef } from 'react'
import Printer from '@eyelly/react-printer'
function App() {
const printContent = useRef(null)
return (
<>
<div ref={printContent}> this is content to print </div>
<div> this is normal content </div>
<Printer content={printContent}>
<button>Printer</button>
</Printer>
</>
)
}In HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
<script src="https://unpkg.com/@eyelly/react-printer/dist"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
function App(){
const printContent = React.useRef(null)
return (
<React.Fragment>
<div ref={printContent}> this is content to print </div>
<div> this is normal content </div>
<Printer content={printContent}>
<button>printer</button>
</Printer>
</React.Fragment>
)
}
ReactDOM.render( <App/> , document.getElementById('app') )
</script>
</body>
</html>
| Property | Description | Type | Default |
|---|---|---|---|
| content | content to be printed | {current:HTMLElement} | - |
| shotcut | enable browser printing shortcut | boolean | true |
| newWindow | open a new window to print | boolean | false |
| title | the title of the newly opened window | boolean | - |