{"id":19778250,"url":"https://github.com/a-x-/react-easy-print","last_synced_at":"2025-07-11T08:42:06.755Z","repository":{"id":22511569,"uuid":"96564935","full_name":"a-x-/react-easy-print","owner":"a-x-","description":"Powerful react component for easy printing","archived":false,"fork":false,"pushed_at":"2022-12-02T05:16:25.000Z","size":1421,"stargazers_count":86,"open_issues_count":33,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-20T14:03:04.588Z","etag":null,"topics":["print","react","react-print","rocketbank"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-easy-print","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a-x-.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-07T18:22:12.000Z","updated_at":"2024-11-04T13:29:03.000Z","dependencies_parsed_at":"2023-01-13T22:02:43.842Z","dependency_job_id":null,"html_url":"https://github.com/a-x-/react-easy-print","commit_stats":null,"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"purl":"pkg:github/a-x-/react-easy-print","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-x-%2Freact-easy-print","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-x-%2Freact-easy-print/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-x-%2Freact-easy-print/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-x-%2Freact-easy-print/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-x-","download_url":"https://codeload.github.com/a-x-/react-easy-print/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-x-%2Freact-easy-print/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264767989,"owners_count":23661085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["print","react","react-print","rocketbank"],"created_at":"2024-11-12T05:28:37.436Z","updated_at":"2025-07-11T08:42:06.732Z","avatar_url":"https://github.com/a-x-.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-easy-print\n\n📦 `0.6.0` with decreased bundle size and state issue fix and TS definitions released!\n\n## High Browser Compatibility\n[All \u003e25% browsers by browserlist](https://github.com/a-x-/react-easy-print/blob/master/.babelrc#L9).\n\nLook also: https://jamie.build/last-2-versions\n\n## Low Size\nAbout 3KiB gzipped\n\n## No dependencies\nWe're using only one tiny build-time dependency to inject styles into a head\n\n## Usage\n\n\u003e Look for [API below](#api).\n\n**example 1** a page with a single printable component without anything else\n```jsx\nimport PrintProvider, { Print, NoPrint } from 'react-easy-print';\n...\n\u003cPrintProvider\u003e\n  \u003cNoPrint\u003e\n    \u003cRouter\u003e                    //\n      \u003cLayout\u003e                  // invisible in the print mode\n        ...                     //\n          \u003cPrint single name=\"foo\"\u003e\n            \u003cspan\u003e              //\n              details           // visible in the print and non-print modes\n            \u003c/span\u003e             //\n          \u003c/Print\u003e\n        ...                     //\n      \u003c/Layout\u003e                 // invisible in the print mode\n    \u003c/Router\u003e                   //\n  \u003c/NoPrint\u003e\n\u003c/PrintProvider\u003e\n```\n\n**example 2** a page with modal window with content should be only visible in the print mode:\n\n```jsx\nimport PrintProvider, { Print } from 'react-easy-print';\n...\n\u003cPrintProvider\u003e\n  \u003cRouter\u003e\n    \u003cLayout\u003e                  //\n      ...                     //\n        \u003cdiv\u003e                 //\n          \u003ch1\u003esome page\u003c/h1\u003e  //\n          \u003cHeader/\u003e           // invisible in the print mode\n          \u003cModal\u003e             //\n            \u003cPrint name=\"foo\"\u003e\n              \u003cspan\u003e          //\n                details       // visible in the print and non-print modes\n              \u003c/span\u003e         //\n            \u003c/Print\u003e\n          \u003c/Modal\u003e            //\n        \u003c/div\u003e                // invisible in the print mode\n      ...                     //\n    \u003c/Layout\u003e                 //\n  \u003c/Router\u003e\n\u003c/PrintProvider\u003e\n```\n\np.s. `print mode` is when browser's print preview opened (e.g. after `^p` or `⌘p` pressed).\n\n**example 3** special content should be visible in print mode only:\n```jsx\n...\n\u003cPrintProvider\u003e\n  ...                                   // invisible in the print mode\n    \u003cPrint printOnly name=\"foo\"\u003e\n      Consectetur adipisicing elit.     // in the print mode visible only\n      Alias, corrupti similique minus   //\n    \u003c/Print\u003e\n  ...                                   // invisible in the print mode\n\u003c/PrintProvider\u003e\n```\n\n**example 4** complex case: almost all content visible in print mode, but some doesn't and another only in print mode visible:\n```jsx\n...\n\u003cPrintProvider\u003e\n  \u003cPrint name=\"foo\"\u003e                        //\n    ...                                     // visible in the print and non-print modes\n      \u003cdiv\u003e                                 //\n        ...                                 //\n          \u003cNoPrint\u003e\n            \u003cHeader/\u003e                       // invisible in print mode\n          \u003c/NoPrint\u003e\n        ...                                 //\n        \u003cPrint printOnly name=\"foo\"\u003e\n          Consectetur adipisicing elit.     // in the print mode visible only\n          Alias, corrupti similique minus   //\n        \u003c/Print\u003e\n      \u003c/div\u003e                                // visible in the print and non-print modes\n    ...                                     //\n  \u003c/Print\u003e\n\u003c/PrintProvider\u003e\n```\n\n## API\n### PrintProvider\nShould be placed in the layout.\n\n| prop |   |   |\n| --- | --- | --- |\n| 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 |\n\n### Print\nShould wrap printable element(s).\n\n| prop |   |   |\n| --- | --- | --- |\n| printOnly | bool, *optional* | in the print mode visible only |\n| ~~exclusive~~ | bool, *optional* | *deprecated* alias for printOnly |\n| single | bool, *optional* | garantee correct position (left, top corner) for single main printable |\n| ~~main~~ | bool, *optional* | *deprecated* alias for single |\n| name | string, **required** | unique constant name (like react's `key` prop) |\n\n### NoPrint\nShould wrap nested to Print nodes to ignore them.\nUseful in the some complex cases. You might not need the `NoPrint`.\n\n| prop |   |   |\n| --- | --- | --- |\n| force | bool, *optional* | `display: node` instead of `visibility: hidden` |\n\n## Alternatives\n* [react-print](https://github.com/captray/react-print)\n* [react-detect-print](https://github.com/tacomanator/react-detect-print)\n* [react-to-print](https://github.com/gregnb/react-to-print)\n\n## Roadmap\n\n* [ ] [jest tests #15](https://github.com/a-x-/react-easy-print/issues/15)\n* [x] [don't store build files in the repo. (use npm registry) #6](https://github.com/a-x-/react-easy-print/issues/6)\n* [ ] [aviod blank pages #9](https://github.com/a-x-/react-easy-print/issues/9)\n* [x] [fix printOnly #11](https://github.com/a-x-/react-easy-print/issues/11)\n* [ ] [print options (page format, switch off default columns)](https://github.com/a-x-/react-easy-print/issues/5)\n\n----\n\n# Sponsored with ❤️ by \u003ca href=\"https://rocketbank.ru\"\u003eRocketBank\u003c/a\u003e \u003cimg src=\"https://user-images.githubusercontent.com/6201068/41535008-57abc544-7309-11e8-9259-4b38bc1e7370.png\" width=\"24\"/\u003e\nRussian Fintech startup\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-x-%2Freact-easy-print","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-x-%2Freact-easy-print","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-x-%2Freact-easy-print/lists"}