Skip to content

a-x-/react-easy-print

BranchesTags

Repository files navigation

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.

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