Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

react-easy-print

0.6.0 • Public • Published

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

Roadmap


Sponsored with ❤️ by RocketBank

Russian Fintech startup

Keywords

none

install

npm i react-easy-print

Downloadsweekly downloads

697

version

0.6.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability