├── .babelrc
├── .eslintrc
├── .gitignore
├── README.md
├── example
    ├── .babelrc
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.js
    │   └── index.js
    └── webpack.config.js
├── package-lock.json
├── package.json
├── prettier.config.js
├── rollup.config.js
└── src
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {},
 3 |   "presets": [
 4 |     [
 5 |       "@babel/preset-env",
 6 |       {
 7 |         "debug": false,
 8 |         "modules": false,
 9 |         "loose": true,
10 |         "targets": {
11 |           "browsers": "defaults"
12 |         }
13 |       }
14 |     ],
15 |     "@babel/preset-react"
16 |   ],
17 |   plugins: [
18 |     "@babel/plugin-transform-destructuring",
19 |     "@babel/plugin-proposal-object-rest-spread"
20 |   ]
21 | }


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "settings": {
 4 |     "import/extensions": [".js"],
 5 |     "import/parser": "babel-eslint",
 6 |     "react": {
 7 |       "version": "detect"
 8 |     },
 9 |     "import/resolver": {
10 |       "node": {
11 |         "extensions": [".js"]
12 |       }
13 |     }
14 |   },
15 |   "parserOptions": {
16 |     "ecmaVersion": 6,
17 |     "sourceType": "module",
18 |     "allowImportExportEverywhere": true,
19 |     "ecmaFeatures": {
20 |       "jsx": true,
21 |       "experimentalObjectRestSpread": true
22 |     },
23 |   },
24 |   "env": {
25 |     "es6": true,
26 |     "browser": true,
27 |     "mocha": true,
28 |     "node": true
29 |   },
30 |   "extends": [
31 |    "plugin:jsx-a11y/recommended"
32 |   ],
33 |   "rules": {
34 |     "no-console": "off",
35 |     "semi": 2,
36 |     "no-undef": 2,
37 |     "no-undef-init": 2,
38 |     "no-tabs": 2,
39 |     "react/self-closing-comp": 2,
40 |     "react/no-typos": 2,
41 |     "jsx-a11y/no-autofocus": [ 2, {
42 |       "ignoreNonDOM": true
43 |     }]
44 |   },
45 |   "plugins": [
46 |     "import",
47 |     "react",
48 |     "jsx-a11y",
49 |     "filenames"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | #Osx
 2 | .DS_Store
 3 | 
 4 | # Logs
 5 | logs
 6 | *.log
 7 | npm-debug.log*
 8 | 
 9 | # sublime project
10 | *.sublime-project
11 | *.sublime-workspace
12 | 
13 | # vscode project
14 | .vscode
15 | 
16 | # idea project
17 | .idea
18 | 
19 | # Runtime data
20 | pids
21 | *.pid
22 | *.seed
23 | 
24 | # Directory for instrumented libs generated by jscoverage/JSCover
25 | lib-cov
26 | 
27 | # Coverage directory used by tools like istanbul
28 | coverage
29 | .nyc_output/
30 | 
31 | # Compiled binary addons (http://nodejs.org/api/addons.html)
32 | build/Release
33 | 
34 | # Dependency directory
35 | node_modules
36 | 
37 | # Optional npm cache directory
38 | .npm
39 | 
40 | # Build Data
41 | dist/*
42 | es/*
43 | lib/*
44 | 
45 | # Docs
46 | docs/.next/*
47 | docs/export/*
48 | .firebase/
49 | 
50 | # Optional REPL history
51 | .node_repl_history


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # use-detect-print
 2 | 
 3 | React Hook to detect printing 
 4 | 
 5 | ## Installation
 6 | 
 7 | ```
 8 | npm install use-detect-print --save
 9 | ```
10 | 
11 | ## Usage
12 | 
13 | ```javascript
14 | import React from 'react';
15 | import useDetectPrint from 'use-detect-print';
16 | 
17 | function App() {
18 | 
19 |   const isPrinting = useDetectPrint();
20 | 
21 |   return (
22 |     <div>
23 |      <span>Is it printing? </span>      
24 |      {isPrinting ? (
25 |        <span style={{ color: 'green', fontSize: 50 }}>Yes</span>
26 |      ): (
27 |        <span style={{ color: 'red' }}>No!</span>
28 |      )}
29 |     </div>
30 |   );
31 | }
32 | 
33 | ```
34 | 


--------------------------------------------------------------------------------
/example/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {},
 3 |   "presets": [
 4 |     [
 5 |       "@babel/preset-env",
 6 |       {
 7 |         "debug": false,
 8 |         "modules": false,
 9 |         "loose": true,
10 |         "targets": {
11 |           "browsers": "defaults"
12 |         }
13 |       }
14 |     ],
15 |     "@babel/preset-react"
16 |   ],
17 |   plugins: [
18 |     "@babel/plugin-transform-destructuring",
19 |     "@babel/plugin-proposal-object-rest-spread"
20 |   ]
21 | }


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>React Hooks Example</title>
 5 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app-root">
10 |     </div>
11 |   </body>
12 |   <script src="/bundle.js"></script>
13 | </html>
14 | 
15 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "use-detect-print",
 3 |   "version": "0.0.1",
 4 |   "description": "use-detect-print example",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server -d --progress --colors"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/gregnb/use-detect-print.git"
12 |   },
13 |   "author": "",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/gregnb/use-detect-print/issues"
17 |   },
18 |   "homepage": "https://github.com/gregnb/use-detect-print#readme",
19 |   "dependencies": {
20 |     "lodash.merge": "^4.6.1",
21 |     "react": "../node_modules/react",
22 |     "react-dom": "../node_modules/react-dom"
23 |   },
24 |   "devDependencies": {
25 |     "@babel/cli": "^7.2.3",
26 |     "@babel/core": "^7.2.2",
27 |     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
28 |     "@babel/plugin-transform-object-assign": "^7.2.0",
29 |     "@babel/preset-env": "^7.3.1",
30 |     "@babel/preset-react": "^7.0.0",
31 |     "babel-eslint": "^10.0.1",
32 |     "babel-loader": "^8.0.5",
33 |     "babel-plugin-transform-class-properties": "^6.24.1",
34 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
35 |     "cross-env": "^5.2.0",
36 |     "eslint": "^5.13.0",
37 |     "eslint-loader": "^2.1.1",
38 |     "eslint-plugin-filenames": "^1.3.2",
39 |     "eslint-plugin-import": "^2.16.0",
40 |     "eslint-plugin-jsx-a11y": "^6.2.1",
41 |     "eslint-plugin-react": "^7.12.4",
42 |     "webpack": "^4.29.1",
43 |     "webpack-cli": "^3.2.1",
44 |     "webpack-dev-server": "^3.1.14"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import useDetectPrint from '../../src';
 3 | 
 4 | function App() {
 5 | 
 6 |   const isPrinting = useDetectPrint();
 7 | 
 8 |   return (
 9 |     <div>
10 |      <span>Is it printing? </span>      
11 |      {isPrinting ? (
12 |        <span style={{ color: 'green', fontSize: 50 }}>Yes</span>
13 |      ): (
14 |        <span style={{ color: 'red' }}>No!</span>
15 |      )}
16 |     </div>
17 |   );
18 | }
19 | 
20 | export default App;
21 | 


--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | ReactDOM.render(<App />, document.getElementById('app-root'));


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   entry: {
 6 |     app: "./src/index.js"
 7 |   },
 8 |   stats: "verbose",
 9 |   mode: "development",
10 |   context: __dirname,
11 |   output: {
12 |     filename: 'bundle.js'
13 |   },
14 |   devtool: 'source-map',
15 |   devServer: {
16 |     disableHostCheck: true,
17 |     hot: true,
18 |     inline: true,
19 |     host: "0.0.0.0",
20 |     port: 5080
21 |   },
22 |   module: {
23 |     rules: [
24 |       {
25 |         test: /\.jsx?$/,
26 |         exclude: /(node_modules)/,
27 |         use: [
28 |           'babel-loader',
29 |           'eslint-loader'
30 |         ]
31 |       }
32 |     ]
33 |   },
34 |   plugins: [
35 |     new webpack.HotModuleReplacementPlugin(),
36 |     new webpack.NamedModulesPlugin(),
37 |     new webpack.DefinePlugin({
38 |       'process.env': {
39 |         NODE_ENV: JSON.stringify("development"),
40 |       }
41 |     })
42 |   ]
43 | };
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "use-detect-print",
 3 |   "version": "0.0.2",
 4 |   "description": "A custom hook to detect printing in the browser",
 5 |   "source": "src/index.js",
 6 |   "main": "dist/index.js",
 7 |   "module": "dist/index.es.js",
 8 |   "scripts": {
 9 |     "build": "rollup -c",
10 |     "dev": "rollup -c -w"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/gregnb/use-detect-print.git"
15 |   },
16 |   "keywords": [
17 |     "react-hooks",
18 |     "hooks",
19 |     "react",
20 |     "print",
21 |     "use-detect-print"
22 |   ],
23 |   "author": "gregnb",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/gregnb/use-detect-print/issues"
27 |   },
28 |   "homepage": "https://github.com/gregnb/use-detect-print#readme",
29 |   "devDependencies": {
30 |     "@babel/core": "^7.2.2",
31 |     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
32 |     "@babel/plugin-transform-destructuring": "^7.3.2",
33 |     "@babel/preset-env": "^7.3.1",
34 |     "@babel/preset-react": "^7.0.0",
35 |     "babel-core": "^6.26.3",
36 |     "eslint": "^5.12.0",
37 |     "husky": "^1.3.1",
38 |     "lint-staged": "^8.1.3",
39 |     "prettier": "^1.16.4",
40 |     "react": "^16.8.1",
41 |     "react-dom": "^16.8.1",
42 |     "rollup": "^1.1.2",
43 |     "rollup-plugin-babel": "^4.3.2",
44 |     "rollup-plugin-commonjs": "^9.2.0",
45 |     "rollup-plugin-copy": "^0.2.3",
46 |     "rollup-plugin-replace": "^2.1.0",
47 |     "rollup-plugin-terser": "^4.0.4",
48 |     "rollup-plugin-uglify": "^6.0.2",
49 |     "rollup-plugin-uglify-es": "0.0.1"
50 |   },
51 |   "files": [
52 |     "dist"
53 |   ],
54 |   "peerDependencies": {
55 |     "react": "^16.8.0"
56 |   },
57 |   "husky": {
58 |     "hooks": {
59 |       "pre-commit": "lint-staged"
60 |     }
61 |   },
62 |   "lint-staged": {
63 |     "src/**/*.{js,jsx}": [
64 |       "prettier --config prettier.config.js --single-quote --write",
65 |       "git add"
66 |     ]
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   printWidth: 120,
 3 |   singleQuote: true,
 4 |   trailingComma: 'all',
 5 |   bracketSpacing: true,
 6 |   jsxBracketSameLine: true,
 7 |   parser: 'babylon',
 8 |   semi: true,
 9 | };
10 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel';
 2 | import replace from 'rollup-plugin-replace';
 3 | import commonjs from 'rollup-plugin-commonjs';
 4 | //import uglify from 'rollup-plugin-uglify-es';
 5 | import { uglify } from 'rollup-plugin-uglify';
 6 | //import { terser } from "rollup-plugin-terser";
 7 | import copy from 'rollup-plugin-copy';
 8 | import pkg from './package.json'
 9 | 
10 | const external = Object.keys(pkg.peerDependencies || {});
11 | const allExternal = [...external, Object.keys(pkg.dependencies || {})];
12 | 
13 | export default {
14 |   input: 'src/index.js',
15 |   external: allExternal,
16 |   plugins: [
17 |     replace({
18 |       'process.env.NODE_ENV': JSON.stringify('production'),
19 |     }),
20 |     commonjs({
21 |       include: [
22 |         'node_modules/**',
23 |       ],
24 |     }),
25 |     babel({
26 |       exclude: 'node_modules/**', // only transpile our source code
27 |     }),
28 |     uglify()
29 |   ],
30 |   output: [
31 |     {
32 |       file: pkg.main,
33 |       format: 'cjs',
34 |       exports: 'named'
35 |     }
36 |   ]
37 | };


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | 
 3 | function useDetectPrint() {
 4 |   const [isPrinting, toggleStatus] = useState(false);
 5 | 
 6 |   useEffect(() => {
 7 |     const printMq = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('print');
 8 |     const mqEvent = mqList => toggleStatus(!!mqList.matches);
 9 | 
10 |     printMq.addListener(mqEvent);
11 |     return () => printMq.removeListener(mqEvent);
12 |   });
13 | 
14 |   return isPrinting;
15 | }
16 | 
17 | export default useDetectPrint;
18 | 


--------------------------------------------------------------------------------