├── .eslintignore ├── .gitignore ├── src ├── module.d.ts ├── utils │ └── getScreenSize.ts └── index.ts ├── .prettierrc ├── .npmignore ├── tsconfig.json ├── .eslintrc ├── package.json └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | node_modules 4 | lib 5 | yarn.lock 6 | package-lock.json -------------------------------------------------------------------------------- /src/module.d.ts: -------------------------------------------------------------------------------- 1 | interface ScreenSize { 2 | width: number; 3 | height: number; 4 | } 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": true, 4 | "singleQuote": true, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | node_modules 4 | src 5 | .eslintignore 6 | .eslintrc 7 | .npmignore 8 | .prettierrc 9 | yarn.lock 10 | package-lock.json 11 | tsconfig.json -------------------------------------------------------------------------------- /src/utils/getScreenSize.ts: -------------------------------------------------------------------------------- 1 | const getScreenSize = (): ScreenSize => { 2 | return { 3 | width: window.innerWidth, 4 | height: window.innerHeight, 5 | }; 6 | }; 7 | 8 | export default getScreenSize; 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "lib": ["es6", "dom"], 6 | "declaration": true, 7 | "outDir": "./lib", 8 | "strict": true 9 | }, 10 | "include": ["src"], 11 | "exclude": ["node_modules"] 12 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": [ 5 | "@typescript-eslint", 6 | "prettier" 7 | ], 8 | "extends": [ 9 | "eslint:recommended", 10 | "plugin:@typescript-eslint/eslint-recommended", 11 | "plugin:@typescript-eslint/recommended", 12 | "prettier" 13 | ], 14 | "rules": { 15 | "no-console": 1 16 | } 17 | } -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | import getScreenSize from './utils/getScreenSize'; 4 | 5 | const currentScreenSize = (): ScreenSize => { 6 | const [screenSize, setScreenSize] = useState(getScreenSize()); 7 | const handleResize = () => setScreenSize(getScreenSize()); 8 | 9 | useEffect(() => { 10 | window.addEventListener('resize', handleResize); 11 | 12 | return () => { 13 | window.removeEventListener('resize', handleResize); 14 | }; 15 | }, []); 16 | 17 | return screenSize; 18 | }; 19 | 20 | export default currentScreenSize; 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-resize-test", 3 | "version": "1.0.1", 4 | "description": "NPM module template description", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "format": "prettier --write src/*", 9 | "lint": "eslint src/*", 10 | "develop": "tsc --watch", 11 | "deploy": "npm publish" 12 | }, 13 | "keywords": [], 14 | "author": "Halo Lab", 15 | "license": "ISC", 16 | "peerDependencies": { 17 | "react": "^16.6.1", 18 | "react-dom": "^16.13.1" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^16.9.43", 22 | "@typescript-eslint/eslint-plugin": "^3.6.1", 23 | "@typescript-eslint/parser": "^3.6.1", 24 | "eslint": "^7.5.0", 25 | "eslint-config-prettier": "^6.11.0", 26 | "eslint-plugin-prettier": "^3.1.4", 27 | "nodemon": "^2.0.4", 28 | "prettier": "^2.0.5", 29 | "typescript": "^3.9.7" 30 | }, 31 | "dependencies": {} 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NPM module template (with Typescript support) 2 | Javascript implementation is available in a following [repo](https://github.com/Halo-Lab/react-hook-module-template) 3 | 4 | Boilerplate to create an npm module development environment with example code (custom hook that track window dimensions). Typescript compiler will create export type definitions together with the javascript file. **The package can be used with both Typescript and Javascript projects**. 5 | 6 | > Our setup will consist of two separate projects: 7 | > 1. NPM Module Project 8 | > 2. React Host Project (to debug new features) 9 | 10 | ![projects structure](https://i.ibb.co/k2JsMyj/projects.png) 11 | 12 | NPM module will be connected to the React Host Project using `npm link`. Project separation will enable us to keep our module logic encapsulated and more maintainable. 13 |
14 |
15 | ## Available script commands 16 | 17 | Build module project to `src/index.js` -> `index.js`. 18 | ``` 19 | npm run build 20 | ``` 21 | Run development will compile a file every time that any changes in `/src` folder will occur. 22 | ``` 23 | npm run develop 24 | ``` 25 | Deploy your project to NPM. The script will trigger `npm publish`. 26 | ``` 27 | npm run deploy 28 | ``` 29 |
30 |
31 | 32 | ## 🚀 Quick start 33 | 34 | 1. Clone template project. 35 | ``` 36 | git clone https://github.com/Halo-Lab/react-hook-module-template-typescript 37 | ``` 38 | 2. Pick a module name and change folder name in `package.json` accordingly. Make sure you are using a unique one so you can publish your package to npm. Provide additional information about your module by changing *description*, *author*, *license* and *keywords*. Describe basic functionality of your module in `README.md` file. 39 | 40 | *project folder* 41 | ``` 42 | /my-new-module 43 | ``` 44 | 45 | *package.json* 46 | ```json 47 | "name": "my-new-module", 48 | "description": "NPM module template description", 49 | "author": "John Smith", 50 | "license": "ISC", 51 | "keywords": ["react", "hooks", "screen size"] 52 | ``` 53 | 54 | 3. Install dependencies 55 | 56 | ``` 57 | npm i 58 | ``` 59 | 60 | 4. An initial build command will compile all files from `/src` folder to a single `index.js` file. 61 | ``` 62 | npm run build 63 | ``` 64 | 5. Our module is ready for development. Now we are ready to connect our module to React Host Project. Create a new React Project in the different folder and change `App.js` file with example code. **Main concept is to keep two projects in separate folders. So after the development process Module Project will include 65 | module logic exclusively.** 66 | 67 | > Be sure that you're **not** creating new project inside Module folder. 68 | 69 | *Navigate to your main Project Folder and create a new React Project.* 70 | ``` 71 | cd .. 72 | npx create-react-app host_react_app 73 | ``` 74 | *App.js* 75 | ```jsx 76 | import React from 'react'; 77 | import useResizing from 'my-new-module'; 78 | 79 | function App() { 80 | const screenSize = useResizing(); 81 | 82 | return ( 83 |
84 | {`${screenSize.width}px ${screenSize.height}px`} 85 |
86 | ); 87 | } 88 | 89 | export default App; 90 | ``` 91 | 6. To connect our module open Module Project folder and create a symlink. Npm link will add our package to the global `/lib/node_modules/my-new-module` folder and create a link from it. You can find more information about npm link functionality in the [official documentation](https://docs.npmjs.com/cli/link). 92 | 93 | ``` 94 | cd my-new-module 95 | npm link 96 | ``` 97 | 7. Now open React Host Project and add your locally developed module. That will create a symbolic link from globally-installed ```my-new-module``` to current `node_modules/` folder 98 | 99 | ``` 100 | cd host_react_app 101 | npm link my-new-module 102 | ``` 103 | 104 | 8. Start React host and Module projects. Any changes inside module's `/src` folder will trigger both projects to rebuild. 105 | 106 | *React host project* 107 | ``` 108 | cd host_react_app 109 | npm run start 110 | ``` 111 | *Module project* 112 | ``` 113 | cd my-new-module 114 | npm run develop 115 | ``` 116 | 117 | 9. Change remote's Git URL to your own repository. 118 | 119 | ``` 120 | git remote set-url origin https://github.com/USERNAME/my-new-module.git 121 | ``` 122 | 123 | 10. Develop your custom module logic inside `/src` folder. 124 | 125 | ## Word from author 126 | 127 | Have fun! ✌️ 128 | 129 | 130 | Supported by Halo lab 131 | 132 | --------------------------------------------------------------------------------