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 single name="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 name="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 printOnly name="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 name="foo">                        //
    ...                                     // visible in the print and non-print modes
      <div>                                 //
        ...                                 //
          <NoPrint>
            <Header/>                       // invisible in print mode
          </NoPrint>
        ...                                 //
        <Print printOnly name="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 |

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
• react-detect-print
• react-to-print

Roadmap

• jest tests #15
• x don't store build files in the repo. (use npm registry) #6
• aviod blank pages #9
• x fix printOnly #11
• print options (page format, switch off default columns)

---

Russian Fintech startup