https://github.com/a-x-/react-easy-print
Powerful react component for easy printing
https://github.com/a-x-/react-easy-print
print react react-print rocketbank
Last synced: about 2 months ago
JSON representation
Powerful react component for easy printing
- Host: GitHub
- URL: https://github.com/a-x-/react-easy-print
- Owner: a-x-
- License: mit
- Created: 2017-07-07T18:22:12.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T05:16:25.000Z (over 2 years ago)
- Last Synced: 2025-04-09T20:07:50.941Z (about 2 months ago)
- Topics: print, react, react-print, rocketbank
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-easy-print
- Size: 1.36 MB
- Stars: 86
- Watchers: 3
- Forks: 20
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-easy-print
📦 `0.6.0` with decreased bundle size and state issue fix and TS definitions released!
## High Browser Compatibility
[All >25% browsers by browserlist](https://github.com/a-x-/react-easy-print/blob/master/.babelrc#L9).
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](#api).
**example 1** a page with a single printable component without anything else
```jsx
import PrintProvider, { Print, NoPrint } from 'react-easy-print';
...
//
// invisible in the print mode
... //
//
details // visible in the print and non-print modes
//
... //
// invisible in the print mode
//
```
**example 2** a page with modal window with content should be only visible in the print mode:
```jsx
import PrintProvider, { Print } from 'react-easy-print';
...
//
... //
//
some page
//
// invisible in the print mode
//
//
details // visible in the print and non-print modes
//
//
// invisible in the print mode
... //
//
```
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:
```jsx
...
... // invisible in the print mode
Consectetur adipisicing elit. // in the print mode visible only
Alias, corrupti similique minus //
... // invisible in the print mode
```
**example 4** complex case: almost all content visible in print mode, but some doesn't and another only in print mode visible:
```jsx
...
//
... // visible in the print and non-print modes
//
... //
// invisible in print mode
... //
Consectetur adipisicing elit. // in the print mode visible only
Alias, corrupti similique minus //
// visible in the print and non-print modes
... //
```
## 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 |
### Print
Should wrap printable element(s).
| prop | | |
| --- | --- | --- |
| printOnly | bool, *optional* | in the print mode visible only |
| ~~exclusive~~ | bool, *optional* | *deprecated* alias for printOnly |
| single | bool, *optional* | garantee correct position (left, top corner) for single main printable |
| ~~main~~ | 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
* [react-print](https://github.com/captray/react-print)
* [react-detect-print](https://github.com/tacomanator/react-detect-print)
* [react-to-print](https://github.com/gregnb/react-to-print)
## Roadmap
* [ ] [jest tests #15](https://github.com/a-x-/react-easy-print/issues/15)
* [x] [don't store build files in the repo. (use npm registry) #6](https://github.com/a-x-/react-easy-print/issues/6)
* [ ] [aviod blank pages #9](https://github.com/a-x-/react-easy-print/issues/9)
* [x] [fix printOnly #11](https://github.com/a-x-/react-easy-print/issues/11)
* [ ] [print options (page format, switch off default columns)](https://github.com/a-x-/react-easy-print/issues/5)
----
# Sponsored with ❤️ by RocketBank 
Russian Fintech startup