react-easy-print
react-easy-print
📦 Try out the 0.6.0-beta.3 with decreased bundle size and state issue fix
High Browser Compatibility
All >25% browsers by browserlist.
Look also: https://jamie.build/last-2-versions
Low Size
About 3KiB gzipped
No dependencies
We're using only one tiny build-time dependency to inject styles into a head
Usage
Look for API below.
example 1 a page with a single printable component without anything else
import PrintProvider Print NoPrint from 'react-easy-print';...<PrintProvider> <NoPrint> <Router> // <Layout> // invisible in the print mode ... // <Print ="foo"> <span> // details // visible in the print and non-print modes </span> // </Print> ... // </Layout> // invisible in the print mode </Router> // </NoPrint></PrintProvider>example 2 a page with modal window with content should be only visible in the print mode:
import PrintProvider Print from 'react-easy-print';...<PrintProvider> <Router> <Layout> // ... // <div> // <h1>some page</h1> // <Header/> // invisible in the print mode <Modal> // <Print ="foo"> <span> // details // visible in the print and non-print modes </span> // </Print> </Modal> // </div> // invisible in the print mode ... // </Layout> // </Router></PrintProvider>p.s. print mode is when browser's print preview opened (e.g. after ^p or ⌘p pressed).
example 3 special content should be visible in print mode only:
...<PrintProvider> ... // invisible in the print mode <Print ="foo"> Consectetur adipisicing elit // in the print mode visible only Alias corrupti similique minus // </Print> ... // invisible in the print mode</PrintProvider>example 4 complex case: almost all content visible in print mode, but some doesn't and another only in print mode visible:
...<PrintProvider> <Print ="foo"> // ... // visible in the print and non-print modes <div> // ... // <NoPrint> <Header/> // invisible in print mode </NoPrint> ... // <Print ="foo"> Consectetur adipisicing elit // in the print mode visible only Alias corrupti similique minus // </Print> </div> // visible in the print and non-print modes ... // </Print></PrintProvider>API
PrintProvider
Should be placed in the layout.
| prop | ||
|---|---|---|
| loose | bool, optional | simple mode without re-render only printable nodes. Uses css visibility trick. It's not appliable if you have complex nested printable node with offsets |
Should wrap printable element(s).
| prop | ||
|---|---|---|
| printOnly | bool, optional | in the print mode visible only |
| bool, optional | deprecated alias for printOnly | |
| single | bool, optional | garantee correct position (left, top corner) for single main printable |
| bool, optional | deprecated alias for single | |
| name | string, required | unique constant name (like react's key prop) |
NoPrint
Should wrap nested to Print nodes to ignore them.
Useful in the some complex cases. You might not need the NoPrint.
| prop | ||
|---|---|---|
| force | bool, optional | display: node instead of visibility: hidden |
Alternatives
Roadmap
- jest tests #15
- don't store build files in the repo. (use npm registry) #6
- aviod blank pages #9
- fix printOnly #11
- print options (page format, switch off default columns)
Sponsored with ❤️ by RocketBank 
Russian Fintech startup
Keywords
noneinstall
weekly downloads
697
