react-easy-print
    TypeScript icon, indicating that this package has built-in type declarations

    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

    1,475

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    80.8 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar