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
• 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