├── .gitignore ├── LICENSE ├── README.md ├── example ├── .env ├── .gitignore ├── README.md ├── package.json ├── public │ ├── .nojekyll │ ├── assets │ │ └── recording.mov │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── components │ │ ├── about.tsx │ │ ├── credits.tsx │ │ └── usage.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ └── serviceWorker.ts ├── tsconfig.json └── yarn.lock ├── package.json ├── recording.gif ├── src ├── ResponsiveReactApp.tsx ├── TabBar.tsx ├── hooks │ └── useWindowSize.ts └── index.tsx ├── test └── ResponsiveReactApp.test.tsx ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | .rts2_cache_cjs 6 | .rts2_cache_esm 7 | .rts2_cache_umd 8 | dist 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Herman Starikov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Responsive React App 2 | -------------------- 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ![Demo Recording](https://github.com/Hermanya/responsive-react-app/raw/master/recording.gif) 15 | 16 | [👉 See the Website](https://hermanya.github.io/responsive-react-app) 17 | 18 | [👉 Basic demo on CodeSendbox](https://codesandbox.io/s/bold-noether-fybj1) 19 | 20 | [👉 See another website that's using this lib](https://starikov.dev) 21 | 22 | ## Features 23 | 24 | - Lightweight 25 | - Easy to use 26 | - RESPONSIVE 27 | 28 | ## License 29 | 30 | [MIT](./LICENSE) 31 | -------------------------------------------------------------------------------- /example/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "http://hermanya.github.io/responsive-react-app", 6 | "dependencies": { 7 | "@types/jest": "24.0.18", 8 | "@types/node": "12.7.2", 9 | "@types/react": "16.9.2", 10 | "@types/react-dom": "16.9.0", 11 | "gh-pages": "^2.1.1", 12 | "react": "link:../node_modules/react", 13 | "react-dom": "link:../node_modules/react-dom", 14 | "react-feather": "^2.0.3", 15 | "react-router-dom": "^5.0.1", 16 | "react-scripts": "3.1.1", 17 | "responsive-react-app": "link:..", 18 | "styled-components": "^4.3.2", 19 | "typescript": "3.5.3" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject", 26 | "predeploy": "yarn build", 27 | "deploy": "gh-pages -d build --dotfiles" 28 | }, 29 | "eslintConfig": { 30 | "extends": "react-app" 31 | }, 32 | "babelMacros": { 33 | "styledComponents": { 34 | "pure": true 35 | } 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /example/public/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hermanya/responsive-react-app/cd394f053a397fe22a954f5b3f88489f59f293ba/example/public/.nojekyll -------------------------------------------------------------------------------- /example/public/assets/recording.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hermanya/responsive-react-app/cd394f053a397fe22a954f5b3f88489f59f293ba/example/public/assets/recording.mov -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hermanya/responsive-react-app/cd394f053a397fe22a954f5b3f88489f59f293ba/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hermanya/responsive-react-app/cd394f053a397fe22a954f5b3f88489f59f293ba/example/public/logo192.png -------------------------------------------------------------------------------- /example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hermanya/responsive-react-app/cd394f053a397fe22a954f5b3f88489f59f293ba/example/public/logo512.png -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /example/src/components/about.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import "styled-components/macro"; 3 | 4 | function About() { 5 | return ( 6 |
7 | 14 | 15 |
16 | GitHub{" "} 17 | NPM 18 |

Why did I make this?

19 |

20 | As a frontend developer I find it difficult to build trully responsive 21 | websites. I'm not saying I can't write media queries (although I 22 | google syntax every time). But screen width on its own is not enough 23 | to make component layout decisions. 24 |

25 |

26 | And as a user I hate it when a desktop website does not offer a mobile 27 | version. Or when the desktop version is the mobile version stretched 28 | to all the way across my 15" screen. 29 |

30 |

31 | Desktop websites are notorious for wasting valueable screen space. 32 | Think about the last time you visited a website that did not have a 33 | 1000px container. 34 |

35 |

Mobile first taken to extremes

36 |

37 | So I when I was redesigning my website I decided to only make mobile 38 | pages. And instead of streching them on tablet and desktop, I would 39 | just show more pages at the same time. 40 |

41 |

Try resizing this page in your browser.

42 |
43 |
44 | ); 45 | } 46 | 47 | export default About; 48 | -------------------------------------------------------------------------------- /example/src/components/credits.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import styled from "styled-components/macro"; 3 | 4 | const Avatar = styled.img` 5 | float: left; 6 | margin-right: 1em; 7 | border-radius: 8px; 8 | `; 9 | 10 | const Dependencies = styled.ol` 11 | li { 12 | line-height: 2; 13 | } 14 | `; 15 | 16 | function Credits() { 17 | return ( 18 |
19 |

Credits

20 | 21 |

22 | License: MIT 23 |

24 | 25 |

Dependencies:

26 | 27 |
  • 28 | react >=16 29 |
    • 30 |
  • 31 | react-router-dom >=5 32 |
    • 33 |
  • 34 | styled-components >=4 35 |
    • 36 |     37 | 38 |

    Made by:

    39 | 40 |
    47 | 52 | 59 | Herman Starikov 60 | 61 | 62 | starikov.dev 63 | 64 |
    65 |
    66 | ); 67 | } 68 | export default Credits; 69 | -------------------------------------------------------------------------------- /example/src/components/usage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import "styled-components/macro"; 3 | 4 | const codeExample = ` 5 | import ResponsiveReactApp 6 | from 'react-responsive-app'; 7 | import styled 8 | from 'styled-components' 9 | import { Link } 10 | from 'react-router-dom' 11 | 12 | const Page = styled.div\` 13 | padding: 32px; 14 | \` 15 | 16 | const Tab = styled(Link)\` 17 | text-decoration: none; 18 | font-size: 0.7rem; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | width: 60px; 24 | \` 25 | 26 | const Icon = styled.div\` 27 | font-size: 24px; 28 | \`; 29 | 30 | const App = () => 31 | 33 | Page 1 34 | Page 2 35 | Page 3 36 | 37 | 🤟 38 | Page 4 39 | 40 | } 41 | paths={[ 42 | '/', '/2', '/3', '/4' 43 | ]} 44 | > 45 | Page 1 46 | Page 2 47 | Maybe Page 3 48 | And Maybe Page 4 49 | 50 | `; 51 | 52 | function Usage() { 53 | return ( 54 |
    55 |

    Usage

    56 |

    57 | I put together an example on{" "} 58 | 59 | CodeSendbox 60 | 61 | . 62 |

    63 |

    Install the package:

    64 | 65 | npm install responsive-react-app react react-router-dom 66 | styled-components 67 | 68 |

    Add this code:

    69 | 
    70 |         {codeExample}
71 |
    72 |

    Number of pages may vary from 1 to 4.

    73 |
    74 | ); 75 | } 76 | 77 | export default Usage; 78 | -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body, 5 | html { 6 | margin: 0; 7 | background: #fff; 8 | color: #000; 9 | font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", 10 | "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", 11 | "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 | font-weight: normal; 13 | word-wrap: break-word; 14 | font-kerning: normal; 15 | font-feature-settings: "kern", "liga", "clig", "calt"; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | @media (prefers-color-scheme: dark) { 20 | body, 21 | html { 22 | background: #000; 23 | color: #fff; 24 | } 25 | a { 26 | filter: brightness(3); 27 | } 28 | } 29 | code { 30 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 31 | monospace; 32 | color: #666; 33 | line-height: 1.5; 34 | } 35 | p { 36 | line-height: 1.5; 37 | } 38 | -------------------------------------------------------------------------------- /example/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import "react-app-polyfill/ie11"; 3 | import * as ReactDOM from "react-dom"; 4 | import { Code, HelpCircle, Info } from "react-feather"; 5 | import ResponsiveReactApp, { TabBarLink } from "responsive-react-app"; 6 | import "./index.css"; 7 | import Usage from "./components/usage"; 8 | import About from "./components/about"; 9 | import Credits from "./components/credits"; 10 | import * as _ from "styled-components/cssprop"; // eslint-disable-line 11 | 12 | const App = () => { 13 | return ( 14 | 17 | 18 | 19 | About 20 | 21 | 22 | 23 | Usage 24 | 25 | 26 | 27 | Credits 28 | 29 | 30 | } 31 | paths={["/", "/usage", "/credits"]} 32 | routerProps={{ basename: process.env.PUBLIC_URL }} 33 | > 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | ReactDOM.render(, document.getElementById("root")); 42 | -------------------------------------------------------------------------------- /example/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /example/src/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | type Config = { 24 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 25 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 26 | }; 27 | 28 | export function register(config?: Config) { 29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 30 | // The URL constructor is available in all browsers that support SW. 31 | const publicUrl = new URL( 32 | (process as { env: { [key: string]: string } }).env.PUBLIC_URL, 33 | window.location.href 34 | ); 35 | if (publicUrl.origin !== window.location.origin) { 36 | // Our service worker won't work if PUBLIC_URL is on a different origin 37 | // from what our page is served on. This might happen if a CDN is used to 38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 39 | return; 40 | } 41 | 42 | window.addEventListener('load', () => { 43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 44 | 45 | if (isLocalhost) { 46 | // This is running on localhost. Let's check if a service worker still exists or not. 47 | checkValidServiceWorker(swUrl, config); 48 | 49 | // Add some additional logging to localhost, pointing developers to the 50 | // service worker/PWA documentation. 51 | navigator.serviceWorker.ready.then(() => { 52 | console.log( 53 | 'This web app is being served cache-first by a service ' + 54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 55 | ); 56 | }); 57 | } else { 58 | // Is not localhost. Just register service worker 59 | registerValidSW(swUrl, config); 60 | } 61 | }); 62 | } 63 | } 64 | 65 | function registerValidSW(swUrl: string, config?: Config) { 66 | navigator.serviceWorker 67 | .register(swUrl) 68 | .then(registration => { 69 | registration.onupdatefound = () => { 70 | const installingWorker = registration.installing; 71 | if (installingWorker == null) { 72 | return; 73 | } 74 | installingWorker.onstatechange = () => { 75 | if (installingWorker.state === 'installed') { 76 | if (navigator.serviceWorker.controller) { 77 | // At this point, the updated precached content has been fetched, 78 | // but the previous service worker will still serve the older 79 | // content until all client tabs are closed. 80 | console.log( 81 | 'New content is available and will be used when all ' + 82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 83 | ); 84 | 85 | // Execute callback 86 | if (config && config.onUpdate) { 87 | config.onUpdate(registration); 88 | } 89 | } else { 90 | // At this point, everything has been precached. 91 | // It's the perfect time to display a 92 | // "Content is cached for offline use." message. 93 | console.log('Content is cached for offline use.'); 94 | 95 | // Execute callback 96 | if (config && config.onSuccess) { 97 | config.onSuccess(registration); 98 | } 99 | } 100 | } 101 | }; 102 | }; 103 | }) 104 | .catch(error => { 105 | console.error('Error during service worker registration:', error); 106 | }); 107 | } 108 | 109 | function checkValidServiceWorker(swUrl: string, config?: Config) { 110 | // Check if the service worker can be found. If it can't reload the page. 111 | fetch(swUrl) 112 | .then(response => { 113 | // Ensure service worker exists, and that we really are getting a JS file. 114 | const contentType = response.headers.get('content-type'); 115 | if ( 116 | response.status === 404 || 117 | (contentType != null && contentType.indexOf('javascript') === -1) 118 | ) { 119 | // No service worker found. Probably a different app. Reload the page. 120 | navigator.serviceWorker.ready.then(registration => { 121 | registration.unregister().then(() => { 122 | window.location.reload(); 123 | }); 124 | }); 125 | } else { 126 | // Service worker found. Proceed as normal. 127 | registerValidSW(swUrl, config); 128 | } 129 | }) 130 | .catch(() => { 131 | console.log( 132 | 'No internet connection found. App is running in offline mode.' 133 | ); 134 | }); 135 | } 136 | 137 | export function unregister() { 138 | if ('serviceWorker' in navigator) { 139 | navigator.serviceWorker.ready.then(registration => { 140 | registration.unregister(); 141 | }); 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "responsive-react-app", 3 | "version": "0.1.3", 4 | "main": "dist/index.js", 5 | "module": "dist/responsive-react-app.esm.js", 6 | "typings": "dist/index.d.ts", 7 | "files": [ 8 | "dist" 9 | ], 10 | "license": "MIT", 11 | "scripts": { 12 | "start": "tsdx watch", 13 | "build": "tsdx build", 14 | "test": "tsdx test --env=jsdom", 15 | "lint": "tsdx lint", 16 | "prepare": "yarn run build", 17 | "deploy": "cd example && yarn install && yarn deploy" 18 | }, 19 | "peerDependencies": { 20 | "react": ">=16", 21 | "react-router-dom": ">=5", 22 | "styled-components": ">=4" 23 | }, 24 | "husky": { 25 | "hooks": { 26 | "pre-commit": "pretty-quick --staged" 27 | } 28 | }, 29 | "prettier": {}, 30 | "devDependencies": { 31 | "@types/jest": "^24.0.18", 32 | "@types/react": "^16.9.2", 33 | "@types/react-dom": "^16.9.0", 34 | "@types/react-router-dom": "^4.3.4", 35 | "@types/styled-components": "^4.1.18", 36 | "husky": "^3.0.4", 37 | "prettier": "^1.18.2", 38 | "pretty-quick": "^1.11.1", 39 | "react": "^16.9.0", 40 | "react-dom": "^16.9.0", 41 | "tsdx": "^0.8.0", 42 | "tslib": "^1.10.0", 43 | "typescript": "^3.5.3" 44 | }, 45 | "description": "Responsive React App --------------------", 46 | "directories": { 47 | "example": "example", 48 | "test": "test" 49 | }, 50 | "dependencies": { 51 | "abab": "^2.0.0", 52 | "acorn-globals": "^4.3.3", 53 | "acorn": "^6.3.0", 54 | "abbrev": "^1.1.1", 55 | "ajv": "^6.10.2", 56 | "ajv-errors": "^1.0.1", 57 | "acorn-walk": "^6.2.0", 58 | "ajv-keywords": "^3.4.1", 59 | "ansi-colors": "^3.2.4", 60 | "ansi-escapes": "^3.2.0", 61 | "ansi-regex": "^2.1.1", 62 | "ansi-styles": "^3.2.1", 63 | "anymatch": "^2.0.0", 64 | "aproba": "^1.2.0", 65 | "are-we-there-yet": "^1.1.5", 66 | "argparse": "^1.0.10", 67 | "aria-query": "^3.0.0", 68 | "arr-diff": "^4.0.0", 69 | "arr-union": "^3.1.0", 70 | "arr-flatten": "^1.1.0", 71 | "array-equal": "^1.0.0", 72 | "array-includes": "^3.0.3", 73 | "array-differ": "^2.1.0", 74 | "array-uniq": "^1.0.3", 75 | "array-unique": "^0.3.2", 76 | "array-union": "^1.0.2", 77 | "asn1": "^0.2.4", 78 | "arrify": "^1.0.1", 79 | "asn1.js": "^4.10.1", 80 | "assert": "^1.5.0", 81 | "assert-plus": "^1.0.0", 82 | "assign-symbols": "^1.0.0", 83 | "ast-types-flow": "^0.0.7", 84 | "astral-regex": "^1.0.0", 85 | "async": "^2.6.3", 86 | "async-each": "^1.0.3", 87 | "asynckit": "^0.4.0", 88 | "async-limiter": "^1.0.1", 89 | "asyncro": "^3.0.0", 90 | "atob": "^2.1.2", 91 | "aws4": "^1.8.0", 92 | "aws-sign2": "^0.7.0", 93 | "axobject-query": "^2.0.2", 94 | "babel-jest": "^24.9.0", 95 | "babel-messages": "^6.23.0", 96 | "babel-code-frame": "^6.26.0", 97 | "babel-plugin-annotate-pure-calls": "^0.4.0", 98 | "babel-plugin-dev-expression": "^0.2.2", 99 | "babel-plugin-dynamic-import-node": "^2.3.0", 100 | "babel-plugin-jest-hoist": "^24.9.0", 101 | "babel-plugin-transform-async-to-promises": "^0.8.14", 102 | "babel-plugin-transform-rename-import": "^2.3.0", 103 | "babel-plugin-istanbul": "^5.2.0", 104 | "babel-preset-jest": "^24.9.0", 105 | "babel-runtime": "^6.26.0", 106 | "babel-traverse": "^6.26.0", 107 | "babel-types": "^6.26.0", 108 | "balanced-match": "^1.0.0", 109 | "babylon": "^6.18.0", 110 | "base64-js": "^1.3.1", 111 | "bcrypt-pbkdf": "^1.0.2", 112 | "big.js": "^5.2.2", 113 | "binary-extensions": "^1.13.1", 114 | "base": "^0.11.2", 115 | "bluebird": "^3.5.5", 116 | "braces": "^2.3.2", 117 | "bn.js": "^4.11.8", 118 | "brace-expansion": "^1.1.11", 119 | "brorand": "^1.1.0", 120 | "browser-process-hrtime": "^0.1.3", 121 | "browser-resolve": "^1.11.3", 122 | "browserify-aes": "^1.2.0", 123 | "browserify-des": "^1.0.2", 124 | "browserify-cipher": "^1.0.1", 125 | "browserify-sign": "^4.0.4", 126 | "browserify-rsa": "^4.0.1", 127 | "browserify-zlib": "^0.2.0", 128 | "browserslist": "^4.6.6", 129 | "bs-logger": "^0.2.6", 130 | "bser": "^2.1.0", 131 | "buffer": "^4.9.1", 132 | "buffer-from": "^1.1.1", 133 | "buffer-xor": "^1.0.3", 134 | "builtin-modules": "^3.1.0", 135 | "builtin-status-codes": "^3.0.0", 136 | "bytes": "^3.1.0", 137 | "cacache": "^12.0.3", 138 | "cache-base": "^1.0.1", 139 | "caller-callsite": "^2.0.0", 140 | "caller-path": "^2.0.0", 141 | "camel-case": "^3.0.0", 142 | "camelcase": "^5.3.1", 143 | "callsites": "^3.1.0", 144 | "caniuse-lite": "^1.0.30000989", 145 | "caseless": "^0.12.0", 146 | "capture-exit": "^2.0.0", 147 | "chokidar": "^2.1.6", 148 | "chardet": "^0.7.0", 149 | "chownr": "^1.1.2", 150 | "chrome-trace-event": "^1.0.2", 151 | "chalk": "^2.4.2", 152 | "ci-info": "^2.0.0", 153 | "cli-cursor": "^2.1.0", 154 | "class-utils": "^0.3.6", 155 | "cipher-base": "^1.0.4", 156 | "cli-width": "^2.2.0", 157 | "cli-spinners": "^1.3.1", 158 | "cliui": "^5.0.0", 159 | "clone": "^1.0.4", 160 | "co": "^4.6.0", 161 | "code-point-at": "^1.1.0", 162 | "color-convert": "^1.9.3", 163 | "color-name": "^1.1.3", 164 | "collection-visit": "^1.0.0", 165 | "combined-stream": "^1.0.8", 166 | "commander": "^2.20.0", 167 | "commondir": "^1.0.1", 168 | "component-emitter": "^1.3.0", 169 | "concat-stream": "^1.6.2", 170 | "concat-map": "^0.0.1", 171 | "console-browserify": "^1.1.0", 172 | "confusing-browser-globals": "^1.0.8", 173 | "constants-browserify": "^1.0.0", 174 | "contains-path": "^0.1.0", 175 | "console-control-strings": "^1.1.0", 176 | "convert-source-map": "^1.6.0", 177 | "copy-concurrently": "^1.0.5", 178 | "copy-descriptor": "^0.1.1", 179 | "core-js": "^2.6.9", 180 | "core-util-is": "^1.0.2", 181 | "core-js-compat": "^3.2.1", 182 | "cosmiconfig": "^5.2.1", 183 | "create-hash": "^1.2.0", 184 | "create-ecdh": "^4.0.3", 185 | "create-hmac": "^1.1.7", 186 | "cross-env": "^5.2.0", 187 | "crypto-browserify": "^3.12.0", 188 | "cross-spawn": "^6.0.5", 189 | "cssom": "^0.3.8", 190 | "cssstyle": "^1.4.0", 191 | "csstype": "^2.6.6", 192 | "damerau-levenshtein": "^1.0.5", 193 | "dashdash": "^1.14.1", 194 | "cyclist": "^0.2.2", 195 | "data-urls": "^1.1.0", 196 | "date-now": "^0.1.4", 197 | "debug": "^2.6.9", 198 | "decamelize": "^1.2.0", 199 | "decode-uri-component": "^0.2.0", 200 | "deep-extend": "^0.6.0", 201 | "deep-is": "^0.1.3", 202 | "defaults": "^1.0.3", 203 | "define-properties": "^1.1.3", 204 | "define-property": "^0.2.5", 205 | "delegates": "^1.0.0", 206 | "delayed-stream": "^1.0.0", 207 | "des.js": "^1.0.0", 208 | "detect-libc": "^1.0.3", 209 | "detect-newline": "^2.1.0", 210 | "diff": "^3.5.0", 211 | "diff-sequences": "^24.9.0", 212 | "doctrine": "^1.5.0", 213 | "diffie-hellman": "^5.0.3", 214 | "domain-browser": "^1.2.0", 215 | "domexception": "^1.0.1", 216 | "duplexify": "^3.7.1", 217 | "duplexer": "^0.1.1", 218 | "ecc-jsbn": "^0.1.2", 219 | "electron-to-chromium": "^1.3.236", 220 | "emoji-regex": "^7.0.3", 221 | "elliptic": "^6.5.0", 222 | "email-addresses": "^3.0.3", 223 | "enhanced-resolve": "^4.1.0", 224 | "end-of-stream": "^1.4.1", 225 | "emojis-list": "^2.1.0", 226 | "enquirer": "^2.3.1", 227 | "errno": "^0.1.7", 228 | "es-abstract": "^1.13.0", 229 | "es-to-primitive": "^1.2.0", 230 | "escape-string-regexp": "^1.0.5", 231 | "error-ex": "^1.3.2", 232 | "escodegen": "^1.12.0", 233 | "eslint": "^6.2.1", 234 | "eslint-config-react-app": "^5.0.1", 235 | "eslint-config-prettier": "^6.1.0", 236 | "eslint-import-resolver-node": "^0.3.2", 237 | "eslint-plugin-flowtype": "^4.2.0", 238 | "eslint-module-utils": "^2.4.1", 239 | "eslint-plugin-import": "^2.18.2", 240 | "eslint-plugin-prettier": "^3.1.0", 241 | "eslint-plugin-react": "^7.14.3", 242 | "eslint-plugin-react-hooks": "^1.7.0", 243 | "eslint-plugin-jsx-a11y": "^6.2.3", 244 | "eslint-scope": "^4.0.3", 245 | "eslint-utils": "^1.4.2", 246 | "eslint-visitor-keys": "^1.1.0", 247 | "esprima": "^4.0.1", 248 | "espree": "^6.1.0", 249 | "esrecurse": "^4.2.1", 250 | "esquery": "^1.0.1", 251 | "estraverse": "^4.3.0", 252 | "esutils": "^2.0.3", 253 | "events": "^3.0.0", 254 | "evp_bytestokey": "^1.0.3", 255 | "execa": "^1.0.0", 256 | "estree-walker": "^0.6.1", 257 | "exec-sh": "^0.3.2", 258 | "exit": "^0.1.2", 259 | "expand-brackets": "^2.1.4", 260 | "expect": "^24.9.0", 261 | "extend": "^3.0.2", 262 | "external-editor": "^3.1.0", 263 | "extend-shallow": "^2.0.1", 264 | "extglob": "^2.0.4", 265 | "extsprintf": "^1.3.0", 266 | "fast-deep-equal": "^2.0.1", 267 | "fast-diff": "^1.2.0", 268 | "fast-levenshtein": "^2.0.6", 269 | "fb-watchman": "^2.0.0", 270 | "file-entry-cache": "^5.0.1", 271 | "filename-reserved-regex": "^1.0.0", 272 | "fast-json-stable-stringify": "^2.0.0", 273 | "figgy-pudding": "^3.5.1", 274 | "figures": "^3.0.0", 275 | "filenamify": "^1.2.1", 276 | "find-cache-dir": "^2.1.0", 277 | "find-up": "^3.0.0", 278 | "filenamify-url": "^1.0.0", 279 | "flat-cache": "^2.0.1", 280 | "fill-range": "^4.0.0", 281 | "flush-write-stream": "^1.1.1", 282 | "flatted": "^2.0.1", 283 | "for-in": "^1.0.2", 284 | "form-data": "^2.3.3", 285 | "forever-agent": "^0.6.1", 286 | "fragment-cache": "^0.2.1", 287 | "from2": "^2.3.0", 288 | "fs-extra": "^7.0.1", 289 | "fs-minipass": "^1.2.6", 290 | "fs-write-stream-atomic": "^1.0.10", 291 | "fs.realpath": "^1.0.0", 292 | "functional-red-black-tree": "^1.0.1", 293 | "fsevents": "^1.2.9", 294 | "function-bind": "^1.1.1", 295 | "gauge": "^2.7.4", 296 | "get-stdin": "^7.0.0", 297 | "get-caller-file": "^2.0.5", 298 | "get-stream": "^4.1.0", 299 | "get-value": "^2.0.6", 300 | "getpass": "^0.1.7", 301 | "gh-pages": "^2.1.1", 302 | "glob": "^7.1.4", 303 | "glob-parent": "^5.0.0", 304 | "globby": "^6.1.0", 305 | "globals": "^11.12.0", 306 | "globalyzer": "^0.1.4", 307 | "globrex": "^0.1.2", 308 | "graceful-fs": "^4.2.2", 309 | "growly": "^1.3.0", 310 | "gzip-size": "^5.1.1", 311 | "handlebars": "^4.1.2", 312 | "har-schema": "^2.0.0", 313 | "har-validator": "^5.1.3", 314 | "has-ansi": "^2.0.0", 315 | "has": "^1.0.3", 316 | "has-flag": "^3.0.0", 317 | "has-symbols": "^1.0.0", 318 | "has-unicode": "^2.0.1", 319 | "has-value": "^1.0.0", 320 | "has-values": "^1.0.0", 321 | "hash.js": "^1.1.7", 322 | "hash-base": "^3.0.4", 323 | "hmac-drbg": "^1.0.1", 324 | "hosted-git-info": "^2.8.4", 325 | "html-encoding-sniffer": "^1.0.2", 326 | "http-signature": "^1.2.0", 327 | "https-browserify": "^1.0.0", 328 | "humanize-duration": "^3.20.1", 329 | "iconv-lite": "^0.4.24", 330 | "ieee754": "^1.1.13", 331 | "humanize-url": "^1.0.1", 332 | "iferr": "^0.1.5", 333 | "ignore": "^3.3.10", 334 | "ignore-walk": "^3.0.1", 335 | "import-fresh": "^2.0.0", 336 | "import-local": "^2.0.0", 337 | "imurmurhash": "^0.1.4", 338 | "infer-owner": "^1.0.4", 339 | "inflight": "^1.0.6", 340 | "inherits": "^2.0.4", 341 | "inquirer": "^6.5.1", 342 | "ini": "^1.3.5", 343 | "invariant": "^2.2.4", 344 | "is-accessor-descriptor": "^1.0.0", 345 | "is-arrayish": "^0.2.1", 346 | "is-binary-path": "^1.0.1", 347 | "is-buffer": "^1.1.6", 348 | "is-callable": "^1.1.4", 349 | "is-ci": "^2.0.0", 350 | "is-data-descriptor": "^1.0.0", 351 | "is-date-object": "^1.0.1", 352 | "is-descriptor": "^1.0.2", 353 | "is-directory": "^0.3.1", 354 | "is-extglob": "^2.1.1", 355 | "is-extendable": "^0.1.1", 356 | "is-fullwidth-code-point": "^2.0.0", 357 | "is-generator-fn": "^2.1.0", 358 | "is-glob": "^4.0.1", 359 | "is-number": "^3.0.0", 360 | "is-module": "^1.0.0", 361 | "is-plain-obj": "^1.1.0", 362 | "is-plain-object": "^2.0.4", 363 | "is-promise": "^2.1.0", 364 | "is-reference": "^1.1.3", 365 | "is-regex": "^1.0.4", 366 | "is-stream": "^1.1.0", 367 | "is-symbol": "^1.0.2", 368 | "is-typedarray": "^1.0.0", 369 | "is-windows": "^1.0.2", 370 | "isarray": "^1.0.0", 371 | "is-wsl": "^1.1.0", 372 | "isexe": "^2.0.0", 373 | "isobject": "^3.0.1", 374 | "isstream": "^0.1.2", 375 | "istanbul-lib-coverage": "^2.0.5", 376 | "istanbul-lib-report": "^2.0.8", 377 | "istanbul-lib-source-maps": "^3.0.6", 378 | "istanbul-lib-instrument": "^3.3.0", 379 | "istanbul-reports": "^2.2.6", 380 | "jest": "^24.9.0", 381 | "jest-changed-files": "^24.9.0", 382 | "jest-cli": "^24.9.0", 383 | "jest-config": "^24.9.0", 384 | "jest-diff": "^24.9.0", 385 | "jest-docblock": "^24.9.0", 386 | "jest-environment-jsdom": "^24.9.0", 387 | "jest-each": "^24.9.0", 388 | "jest-environment-node": "^24.9.0", 389 | "jest-get-type": "^24.9.0", 390 | "jest-haste-map": "^24.9.0", 391 | "jest-jasmine2": "^24.9.0", 392 | "jest-leak-detector": "^24.9.0", 393 | "jest-matcher-utils": "^24.9.0", 394 | "jest-mock": "^24.9.0", 395 | "jest-message-util": "^24.9.0", 396 | "jest-pnp-resolver": "^1.2.1", 397 | "jest-regex-util": "^24.9.0", 398 | "jest-resolve": "^24.9.0", 399 | "jest-runner": "^24.9.0", 400 | "jest-resolve-dependencies": "^24.9.0", 401 | "jest-runtime": "^24.9.0", 402 | "jest-serializer": "^24.9.0", 403 | "jest-snapshot": "^24.9.0", 404 | "jest-util": "^24.9.0", 405 | "jest-validate": "^24.9.0", 406 | "jest-watch-typeahead": "^0.3.1", 407 | "jest-watcher": "^24.9.0", 408 | "jpjs": "^1.2.1", 409 | "jest-worker": "^24.9.0", 410 | "js-levenshtein": "^1.1.6", 411 | "js-tokens": "^4.0.0", 412 | "jsbn": "^0.1.1", 413 | "js-yaml": "^3.13.1", 414 | "jsdom": "^11.12.0", 415 | "jsesc": "^2.5.2", 416 | "json-schema-traverse": "^0.4.1", 417 | "json-parse-better-errors": "^1.0.2", 418 | "json-schema": "^0.2.3", 419 | "json-stringify-safe": "^5.0.1", 420 | "jsonfile": "^4.0.0", 421 | "jsprim": "^1.4.1", 422 | "json-stable-stringify-without-jsonify": "^1.0.1", 423 | "json5": "^2.1.0", 424 | "jsx-ast-utils": "^2.2.1", 425 | "kind-of": "^6.0.3", 426 | "kleur": "^3.0.3", 427 | "leven": "^3.1.0", 428 | "levn": "^0.3.0", 429 | "left-pad": "^1.3.0", 430 | "lines-and-columns": "^1.1.6", 431 | "load-json-file": "^2.0.0", 432 | "loader-runner": "^2.4.0", 433 | "locate-path": "^3.0.0", 434 | "loader-utils": "^1.2.3", 435 | "lodash": "^4.17.15", 436 | "lodash.sortby": "^4.7.0", 437 | "lodash.unescape": "^4.0.1", 438 | "log-symbols": "^2.2.0", 439 | "log-update": "^2.3.0", 440 | "loose-envify": "^1.4.0", 441 | "lower-case": "^1.1.4", 442 | "lru-cache": "^4.1.5", 443 | "magic-string": "^0.25.3", 444 | "make-dir": "^2.1.0", 445 | "make-error": "^1.3.5", 446 | "makeerror": "^1.0.11", 447 | "mamacro": "^0.0.3", 448 | "map-visit": "^1.0.0", 449 | "memory-fs": "^0.4.1", 450 | "map-cache": "^0.2.2", 451 | "md5.js": "^1.3.5", 452 | "micromatch": "^3.1.10", 453 | "miller-rabin": "^4.0.1", 454 | "merge-stream": "^2.0.0", 455 | "mime-db": "^1.40.0", 456 | "mimic-fn": "^1.2.0", 457 | "minimalistic-assert": "^1.0.1", 458 | "mime-types": "^2.1.24", 459 | "minimalistic-crypto-utils": "^1.0.1", 460 | "minimatch": "^3.0.4", 461 | "minimist": "^1.2.0", 462 | "minipass": "^2.3.5", 463 | "minizlib": "^1.2.1", 464 | "mississippi": "^3.0.0", 465 | "mixin-deep": "^1.3.2", 466 | "move-concurrently": "^1.0.1", 467 | "mri": "^1.1.4", 468 | "mkdirp": "^0.5.1", 469 | "ms": "^2.1.2", 470 | "multimatch": "^3.0.0", 471 | "mute-stream": "^0.0.8", 472 | "nan": "^2.14.0", 473 | "nanomatch": "^1.2.13", 474 | "natural-compare": "^1.4.0", 475 | "needle": "^2.4.0", 476 | "neo-async": "^2.6.1", 477 | "nice-try": "^1.0.5", 478 | "no-case": "^2.3.2", 479 | "node-int64": "^0.4.0", 480 | "node-notifier": "^5.4.3", 481 | "node-modules-regexp": "^1.0.0", 482 | "node-pre-gyp": "^0.12.0", 483 | "node-releases": "^1.1.27", 484 | "node-libs-browser": "^2.2.1", 485 | "nopt": "^4.0.1", 486 | "normalize-package-data": "^2.5.0", 487 | "normalize-path": "^3.0.0", 488 | "normalize-url": "^4.5.1", 489 | "npm-bundled": "^1.0.6", 490 | "npm-packlist": "^1.4.4", 491 | "npmlog": "^4.1.2", 492 | "npm-run-path": "^2.0.2", 493 | "number-is-nan": "^1.0.1", 494 | "oauth-sign": "^0.9.0", 495 | "nwsapi": "^2.1.4", 496 | "object-assign": "^4.1.1", 497 | "object-copy": "^0.1.0", 498 | "object-keys": "^1.1.1", 499 | "object-visit": "^1.0.1", 500 | "object.assign": "^4.1.0", 501 | "object.entries": "^1.1.0", 502 | "object.fromentries": "^2.0.0", 503 | "object.getownpropertydescriptors": "^2.0.3", 504 | "object.pick": "^1.3.0", 505 | "object.values": "^1.1.0", 506 | "once": "^1.4.0", 507 | "onetime": "^2.0.1", 508 | "opencollective-postinstall": "^2.0.2", 509 | "optimist": "^0.6.1", 510 | "ora": "^3.4.0", 511 | "os-browserify": "^0.3.0", 512 | "optionator": "^0.8.2", 513 | "os-homedir": "^1.0.2", 514 | "os-tmpdir": "^1.0.2", 515 | "osenv": "^0.1.5", 516 | "p-each-series": "^1.0.0", 517 | "p-limit": "^2.2.1", 518 | "p-finally": "^1.0.0", 519 | "p-locate": "^3.0.0", 520 | "p-reduce": "^1.0.0", 521 | "p-try": "^2.2.0", 522 | "parallel-transform": "^1.1.0", 523 | "pako": "^1.0.10", 524 | "parent-module": "^1.0.1", 525 | "parse-asn1": "^5.1.4", 526 | "parse-json": "^4.0.0", 527 | "parse5": "^4.0.0", 528 | "pascal-case": "^2.0.1", 529 | "pascalcase": "^0.1.1", 530 | "path-dirname": "^1.0.2", 531 | "path-browserify": "^0.0.1", 532 | "path-exists": "^3.0.0", 533 | "path-is-absolute": "^1.0.1", 534 | "path-key": "^2.0.1", 535 | "path-parse": "^1.0.6", 536 | "path-type": "^2.0.0", 537 | "pbkdf2": "^3.0.17", 538 | "performance-now": "^2.1.0", 539 | "pify": "^2.3.0", 540 | "pinkie": "^2.0.4", 541 | "pinkie-promise": "^2.0.1", 542 | "pirates": "^4.0.1", 543 | "pkg-dir": "^3.0.0", 544 | "please-upgrade-node": "^3.2.0", 545 | "posix-character-classes": "^0.1.1", 546 | "pn": "^1.1.0", 547 | "prelude-ls": "^1.1.2", 548 | "prepend-http": "^1.0.4", 549 | "prettier-linter-helpers": "^1.0.0", 550 | "pretty-format": "^24.9.0", 551 | "private": "^0.1.8", 552 | "process": "^0.11.10", 553 | "process-nextick-args": "^2.0.1", 554 | "progress": "^2.0.3", 555 | "progress-estimator": "^0.2.2", 556 | "promise-inflight": "^1.0.1", 557 | "prompts": "^2.2.1", 558 | "prop-types": "^15.7.2", 559 | "prr": "^1.0.1", 560 | "pseudomap": "^1.0.2", 561 | "psl": "^1.3.0", 562 | "public-encrypt": "^4.0.3", 563 | "pump": "^3.0.0", 564 | "pumpify": "^1.5.1", 565 | "punycode": "^2.1.1", 566 | "qs": "^6.5.2", 567 | "query-string": "^4.3.4", 568 | "querystring": "^0.2.0", 569 | "querystring-es3": "^0.2.1", 570 | "randombytes": "^2.1.0", 571 | "randomfill": "^1.0.4", 572 | "rc": "^1.2.8", 573 | "react-is": "^16.9.0", 574 | "read-pkg": "^5.2.0", 575 | "read-pkg-up": "^2.0.0", 576 | "readable-stream": "^2.3.6", 577 | "readdirp": "^2.2.1", 578 | "regenerate": "^1.4.0", 579 | "realpath-native": "^1.1.0", 580 | "regenerate-unicode-properties": "^8.1.0", 581 | "regenerator-runtime": "^0.13.3", 582 | "regenerator-transform": "^0.14.1", 583 | "regexp-tree": "^0.1.11", 584 | "regexpp": "^2.0.1", 585 | "regex-not": "^1.0.2", 586 | "regexpu-core": "^4.5.5", 587 | "regjsgen": "^0.5.0", 588 | "regjsparser": "^0.6.0", 589 | "repeat-element": "^1.1.3", 590 | "remove-trailing-separator": "^1.1.0", 591 | "repeat-string": "^1.6.1", 592 | "request": "^2.88.0", 593 | "request-promise-core": "^1.1.2", 594 | "request-promise-native": "^1.0.7", 595 | "require-directory": "^2.1.1", 596 | "require-main-filename": "^2.0.0", 597 | "resolve": "^1.12.0", 598 | "resolve-cwd": "^2.0.0", 599 | "resolve-from": "^3.0.0", 600 | "resolve-url": "^0.2.1", 601 | "restore-cursor": "^2.0.0", 602 | "ret": "^0.1.15", 603 | "rimraf": "^2.7.1", 604 | "ripemd160": "^2.0.2", 605 | "rollup": "^1.19.4", 606 | "rollup-plugin-babel": "^4.3.3", 607 | "rollup-plugin-commonjs": "^10.0.2", 608 | "rollup-plugin-json": "^4.0.0", 609 | "rollup-plugin-node-resolve": "^5.2.0", 610 | "rollup-plugin-replace": "^2.2.0", 611 | "rollup-plugin-size-snapshot": "^0.8.0", 612 | "rollup-plugin-sourcemaps": "^0.4.2", 613 | "rollup-plugin-terser": "^4.0.4", 614 | "rollup-plugin-typescript2": "^0.21.2", 615 | "rollup-pluginutils": "^2.8.1", 616 | "rsvp": "^4.8.5", 617 | "run-async": "^2.3.0", 618 | "run-node": "^1.0.0", 619 | "run-queue": "^1.0.3", 620 | "rxjs": "^6.5.2", 621 | "sade": "^1.6.1", 622 | "safe-buffer": "^5.2.0", 623 | "safe-regex": "^1.1.0", 624 | "safer-buffer": "^2.1.2", 625 | "sane": "^4.1.0", 626 | "sax": "^1.2.4", 627 | "scheduler": "^0.15.0", 628 | "schema-utils": "^1.0.0", 629 | "semver": "^5.7.1", 630 | "semver-compare": "^1.0.0", 631 | "set-blocking": "^2.0.0", 632 | "serialize-javascript": "^3.1.0", 633 | "set-value": "^2.0.1", 634 | "setimmediate": "^1.0.5", 635 | "sha.js": "^2.4.11", 636 | "shebang-command": "^1.2.0", 637 | "shebang-regex": "^1.0.0", 638 | "shellwords": "^0.1.1", 639 | "signal-exit": "^3.0.2", 640 | "sisteransi": "^1.0.3", 641 | "slash": "^2.0.0", 642 | "slice-ansi": "^2.1.0", 643 | "snapdragon": "^0.8.2", 644 | "snapdragon-node": "^2.1.1", 645 | "snapdragon-util": "^3.0.1", 646 | "sort-keys": "^1.1.2", 647 | "source-list-map": "^2.0.1", 648 | "source-map": "^0.6.1", 649 | "source-map-resolve": "^0.5.2", 650 | "source-map-support": "^0.5.13", 651 | "sourcemap-codec": "^1.4.6", 652 | "source-map-url": "^0.4.0", 653 | "spdx-correct": "^3.1.0", 654 | "spdx-exceptions": "^2.2.0", 655 | "spdx-expression-parse": "^3.0.0", 656 | "spdx-license-ids": "^3.0.5", 657 | "split-string": "^3.1.0", 658 | "sprintf-js": "^1.0.3", 659 | "sshpk": "^1.16.1", 660 | "ssri": "^6.0.1", 661 | "stack-utils": "^1.0.2", 662 | "static-extend": "^0.1.2", 663 | "stealthy-require": "^1.1.1", 664 | "stream-browserify": "^2.0.2", 665 | "stream-each": "^1.2.3", 666 | "stream-http": "^2.8.3", 667 | "stream-shift": "^1.0.0", 668 | "strict-uri-encode": "^1.1.0", 669 | "string-length": "^2.0.0", 670 | "string-width": "^3.1.0", 671 | "string_decoder": "^1.3.0", 672 | "strip-ansi": "^5.2.0", 673 | "strip-bom": "^3.0.0", 674 | "strip-eof": "^1.0.0", 675 | "strip-outer": "^1.0.1", 676 | "strip-json-comments": "^3.0.1", 677 | "strip-url-auth": "^1.0.1", 678 | "supports-color": "^6.1.0", 679 | "symbol-tree": "^3.2.4", 680 | "table": "^5.4.6", 681 | "tapable": "^1.1.3", 682 | "tar": "^4.4.10", 683 | "terser": "^3.17.0", 684 | "terser-webpack-plugin": "^1.4.1", 685 | "text-table": "^0.2.0", 686 | "test-exclude": "^5.2.3", 687 | "through": "^2.3.8", 688 | "through2": "^2.0.5", 689 | "throat": "^4.1.0", 690 | "timers-browserify": "^2.0.11", 691 | "tiny-glob": "^0.2.6", 692 | "tmp": "^0.0.33", 693 | "tmpl": "^1.0.4", 694 | "to-arraybuffer": "^1.0.1", 695 | "to-fast-properties": "^1.0.3", 696 | "to-object-path": "^0.3.0", 697 | "to-regex": "^3.0.2", 698 | "to-regex-range": "^2.1.1", 699 | "tough-cookie": "^2.5.0", 700 | "tr46": "^1.0.1", 701 | "trim-repeated": "^1.0.0", 702 | "trim-right": "^1.0.1", 703 | "ts-jest": "^24.0.2", 704 | "tsutils": "^3.17.1", 705 | "tty-browserify": "^0.0.0", 706 | "tunnel-agent": "^0.6.0", 707 | "tweetnacl": "^0.14.5", 708 | "type-check": "^0.3.2", 709 | "type-fest": "^0.6.0", 710 | "typedarray": "^0.0.6", 711 | "uglify-js": "^3.6.0", 712 | "unicode-canonical-property-names-ecmascript": "^1.0.4", 713 | "unicode-match-property-ecmascript": "^1.0.4", 714 | "unicode-match-property-value-ecmascript": "^1.1.0", 715 | "unicode-property-aliases-ecmascript": "^1.0.5", 716 | "union-value": "^1.0.1", 717 | "unique-filename": "^1.1.1", 718 | "unique-slug": "^2.0.2", 719 | "universalify": "^0.1.2", 720 | "unset-value": "^1.0.0", 721 | "upath": "^1.1.2", 722 | "upper-case": "^1.1.3", 723 | "upper-case-first": "^1.1.2", 724 | "uri-js": "^4.2.2", 725 | "urix": "^0.1.0", 726 | "url": "^0.11.0", 727 | "use": "^3.1.1", 728 | "util": "^0.11.1", 729 | "util-deprecate": "^1.0.2", 730 | "util.promisify": "^1.0.0", 731 | "uuid": "^3.3.3", 732 | "v8-compile-cache": "^2.1.0", 733 | "validate-npm-package-license": "^3.0.4", 734 | "vm-browserify": "^1.1.0", 735 | "verror": "^1.10.0", 736 | "w3c-hr-time": "^1.0.1", 737 | "walker": "^1.0.7", 738 | "watchpack": "^1.6.0", 739 | "wcwidth": "^1.0.1", 740 | "webidl-conversions": "^4.0.2", 741 | "webpack": "^4.39.2", 742 | "webpack-sources": "^1.4.3", 743 | "whatwg-encoding": "^1.0.5", 744 | "whatwg-mimetype": "^2.3.0", 745 | "whatwg-url": "^6.5.0", 746 | "which": "^1.3.1", 747 | "which-module": "^2.0.0", 748 | "wide-align": "^1.1.3", 749 | "wordwrap": "^1.0.0", 750 | "worker-farm": "^1.7.0", 751 | "wrap-ansi": "^3.0.1", 752 | "wrappy": "^1.0.2", 753 | "write": "^1.0.3", 754 | "write-file-atomic": "^2.4.1", 755 | "ws": "^7.4.6", 756 | "xml-name-validator": "^3.0.0", 757 | "xtend": "^4.0.2", 758 | "y18n": "^4.0.0", 759 | "yallist": "^3.0.3", 760 | "yargs": "^13.3.0", 761 | "yargs-parser": "^13.1.2" 762 | }, 763 | "repository": { 764 | "type": "git", 765 | "url": "git+https://github.com/Hermanya/responsive-react-app.git" 766 | }, 767 | "keywords": [ 768 | "responsive", 769 | "responsive-design", 770 | "mobile-first", 771 | "react-responsive", 772 | "mobile-nav", 773 | "desktop-layout" 774 | ], 775 | "author": "Herman Starikov ", 776 | "bugs": { 777 | "url": "https://github.com/Hermanya/responsive-react-app/issues" 778 | }, 779 | "homepage": "https://github.com/Hermanya/responsive-react-app#readme" 780 | } 781 | -------------------------------------------------------------------------------- /recording.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hermanya/responsive-react-app/cd394f053a397fe22a954f5b3f88489f59f293ba/recording.gif -------------------------------------------------------------------------------- /src/ResponsiveReactApp.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 3 | import styled, { ThemeProvider } from "styled-components"; 4 | import useWindowSize from "./hooks/useWindowSize"; 5 | import TabBar from "./TabBar"; 6 | 7 | const ViewPort = styled.div` 8 | width: 100vw; 9 | height: 100vh; 10 | overflow-x: hidden; 11 | `; 12 | const Board = styled.div` 13 | display: grid; 14 | grid-auto-flow: column; 15 | justify-content: flex-start; 16 | transition: transform 0.25s; 17 | transition-timing-function: ease-in-out; 18 | `; 19 | const Mobile = styled.div` 20 | padding-bottom: 54px; 21 | box-sizing: border-box; 22 | width: 100vw; 23 | height: 100vh; 24 | overflow-y: scroll; /* has to be scroll, not auto */ 25 | -webkit-overflow-scrolling: touch; 26 | @media screen and (min-width: ${props => props.theme.minimumTabSize * 2}px) { 27 | width: 50vw; 28 | } 29 | @media screen and (min-width: ${props => props.theme.minimumTabSize * 3}px) { 30 | width: 33.333333vw; 31 | } 32 | @media screen and (min-width: ${props => props.theme.minimumTabSize * 4}px) { 33 | width: 25vw; 34 | } 35 | /* padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) 36 | env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); */ 37 | `; 38 | 39 | const ResponsiveReactApp: React.FC<{ 40 | children: any[]; 41 | tabs: any; 42 | paths: string[]; 43 | minimumTabSize?: number; 44 | routerProps?: any; 45 | }> = ({ children, tabs, minimumTabSize = 320, paths, routerProps = {} }) => { 46 | const size = useWindowSize(); 47 | const compnentsPerScreen = (size.width / minimumTabSize) | 0; 48 | const childSize = size.width / compnentsPerScreen; 49 | return ( 50 | 55 | 56 | 57 | 58 | {children.map((_, index) => ( 59 | ( 63 | <> 64 | 73 | {React.Children.map(children, (child, index) => { 74 | return {child}; 75 | })} 76 | 77 | {compnentsPerScreen < children.length && ( 78 | 83 | {tabs.props.children.slice(0)} 84 | 85 | )} 86 | 87 | )} 88 | /> 89 | ))} 90 | 91 | 92 | 93 | 94 | ); 95 | }; 96 | 97 | ResponsiveReactApp.defaultProps = { 98 | children: [], 99 | paths: [] 100 | }; 101 | 102 | export default ResponsiveReactApp; 103 | -------------------------------------------------------------------------------- /src/TabBar.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import styled from "styled-components"; 4 | 5 | export const TabBarLink = styled(Link)` 6 | width: 64px; 7 | font-size: 0.7rem; 8 | padding: 0.25rem 0.25rem 0; 9 | text-decoration: none; 10 | text-align: center; 11 | svg { 12 | display: block; 13 | height: 32px; 14 | margin: 0 auto; 15 | } 16 | `; 17 | 18 | export const TabBarContainer = styled.div` 19 | position: fixed; 20 | display: flex; 21 | justify-content: space-evenly; 22 | bottom: 0; 23 | right: 0; 24 | z-index: 3; 25 | min-height: 3.5rem; 26 | padding-bottom: env(safe-area-inset-bottom); 27 | backdrop-filter: saturate(180%) blur(2px); 28 | background-color: rgba(255, 255, 255, 0.7); 29 | @media (prefers-color-scheme: dark) { 30 | background: rgba(0, 0, 0, 0.3); 31 | a { 32 | color: #fff; 33 | } 34 | } 35 | 36 | width: 100vw; 37 | @media screen and (min-width: ${props => props.theme.minimumTabSize * 2}px) { 38 | width: 50vw; 39 | } 40 | @media screen and (min-width: ${props => props.theme.minimumTabSize * 3}px) { 41 | width: 33.333333vw; 42 | } 43 | @media screen and (min-width: ${props => props.theme.minimumTabSize * 4}px) { 44 | width: 25vw; 45 | } 46 | `; 47 | 48 | export const Active = styled.div` 49 | display: flex; 50 | a, 51 | a:hover { 52 | opacity: 0.5; 53 | } 54 | `; 55 | 56 | const TabBar: React.FC<{ 57 | children: any[]; 58 | compnentsPerScreen: number; 59 | paths: string[]; 60 | pathname: string; 61 | }> = ({ children, compnentsPerScreen, paths, pathname }) => { 62 | const index = Math.min( 63 | paths.indexOf(pathname), 64 | children.length - compnentsPerScreen 65 | ); 66 | return ( 67 | 68 | {children.slice(0, index)} 69 | {children.slice(index, index + compnentsPerScreen).map((child, index) => ( 70 | {child} 71 | ))} 72 | {children.slice(index + compnentsPerScreen)} 73 | 74 | ); 75 | }; 76 | 77 | export default TabBar; 78 | -------------------------------------------------------------------------------- /src/hooks/useWindowSize.ts: -------------------------------------------------------------------------------- 1 | import {useState, useEffect} from 'react' 2 | function useWindowSize() { 3 | const isClient = typeof window === "object"; 4 | 5 | function getSize() { 6 | return { 7 | width: isClient ? window.innerWidth : 0, 8 | height: isClient ? window.innerHeight : 0 9 | }; 10 | } 11 | 12 | const [windowSize, setWindowSize] = useState(getSize); 13 | 14 | useEffect(() => { 15 | if (!isClient) { 16 | return; 17 | } 18 | 19 | function handleResize() { 20 | setWindowSize(getSize()); 21 | } 22 | 23 | window.addEventListener("resize", handleResize); 24 | return () => window.removeEventListener("resize", handleResize); 25 | // eslint-disable-next-line react-hooks/exhaustive-deps 26 | }, []); // Empty array ensures that effect is only run on mount and unmount 27 | 28 | return windowSize; 29 | } 30 | 31 | export default useWindowSize -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import ResponsiveReactApp from './ResponsiveReactApp'; 2 | import TabBar, { TabBarLink } from './TabBar'; 3 | 4 | export default ResponsiveReactApp; 5 | export { TabBar, TabBarLink }; 6 | -------------------------------------------------------------------------------- /test/ResponsiveReactApp.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | import ResponsiveReactApp from "../src"; 4 | import { Link } from "react-router-dom"; 5 | 6 | describe("it", () => { 7 | it("renders without crashing", () => { 8 | const div = document.createElement("div"); 9 | ReactDOM.render( 10 | 13 | Page 1 14 | Page 2 15 | Page 3 16 | Page 4 17 | 18 | } 19 | paths={["/", "/2", "/3", "/4"]} 20 | > 21 |
    Page 1
    22 |
    Page 2
    23 |
    Maybe Page 3
    24 |
    And Maybe Page 4
    25 |     , 26 | div 27 | ); 28 | ReactDOM.unmountComponentAtNode(div); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "target": "es5", 5 | "module": "esnext", 6 | "lib": ["dom", "esnext"], 7 | "importHelpers": true, 8 | "declaration": true, 9 | "sourceMap": true, 10 | "rootDir": "./", 11 | "strict": true, 12 | "noImplicitAny": true, 13 | "strictNullChecks": true, 14 | "strictFunctionTypes": true, 15 | "strictPropertyInitialization": true, 16 | "noImplicitThis": true, 17 | "alwaysStrict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noImplicitReturns": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "moduleResolution": "node", 23 | "baseUrl": "./", 24 | "paths": { 25 | "*": ["src/*", "node_modules/*"] 26 | }, 27 | "jsx": "react", 28 | "esModuleInterop": true 29 | } 30 | } 31 | --------------------------------------------------------------------------------