{"_id":"react-router-tabs","_rev":"13-d60fd316fb3fb6f8153e527860f886c1","name":"react-router-tabs","description":"Dead simple navigation tabs for React Router 4","dist-tags":{"latest":"1.3.2","next":"1.3.2"},"versions":{"1.0.0":{"name":"react-router-tabs","version":"1.0.0","description":"Dead simple navigation tabs for React Router 4","main":"index.js","scripts":{"start":"webpack-dev-server","build":"babel src -d lib","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":"^15"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","css-loader":"^0.28.7","html-webpack-plugin":"^2.30.1","react":"^16.1.1","react-dom":"^16.1.1","react-router-config":"^1.0.0-beta.4","style-loader":"^0.19.0","webpack":"^3.8.1","webpack-dev-server":"^2.9.4"},"dependencies":{"prop-types":"^15.6.0","react-router-dom":"^4.2.2"},"gitHead":"85113a1c3dc4811168206cc3e0194575c29db3bd","_id":"react-router-tabs@1.0.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-hsjGEytpvta0e/TfHZEKxt1ebaADMt5CH4NgDAVbNxlZoJjQxqqCjJcpQ2JiNzhRsGo4ZykfHAMhy0OyPLF0jw==","shasum":"42ef49983079110225961fe18b3f70272d08e3fb","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7P6Bn7f+D8GDF2Md3JZfmcDaWXU2Q0aYxJmllznPUugIgMZuiWcA+JzWXtp9Oxh5CZ5Il5TnsIU1h91r5eySa230="}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs-1.0.0.tgz_1510865506815_0.07537518138997257"},"directories":{}},"1.0.1":{"name":"react-router-tabs","version":"1.0.1","description":"Dead simple navigation tabs for React Router 4","main":"lib/index.js","scripts":{"start":"webpack-dev-server","build":"babel src -d lib","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":"^15"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","css-loader":"^0.28.7","html-webpack-plugin":"^2.30.1","react":"^16.1.1","react-dom":"^16.1.1","react-router-config":"^1.0.0-beta.4","style-loader":"^0.19.0","webpack":"^3.8.1","webpack-dev-server":"^2.9.4"},"dependencies":{"prop-types":"^15.6.0","react-router-dom":"^4.2.2"},"gitHead":"83d5561a22924a7da0e22ef71b988c371c4d4c4a","_id":"react-router-tabs@1.0.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-8KgXz5oDcnmOu/oMBxmZ026O2vDP3IRsuW3Cm6iHuZ7qguqcqUYER9mffChomr+hLYhUbX2a801fihdEtb9jMw==","shasum":"b55ca7acbc61f242fa021ce3d443807df6d7c393","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmy7BJVbF3vibO74wHqaCd71KaZftrkstB5h5hQslc9AIhAPbrIjXLpMtDv4Z0Cwa5My5umiW7w7rrNY0Z15lJpx3K"}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs-1.0.1.tgz_1510866021696_0.7537900172173977"},"directories":{}},"1.0.2":{"name":"react-router-tabs","version":"1.0.2","description":"Dead simple navigation tabs for React Router 4","main":"lib/index.js","scripts":{"start":"webpack-dev-server","build":"babel src -d lib","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":"^15"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","css-loader":"^0.28.7","html-webpack-plugin":"^2.30.1","react":"^16.1.1","react-dom":"^16.1.1","react-router-config":"^1.0.0-beta.4","style-loader":"^0.19.0","webpack":"^3.8.1","webpack-dev-server":"^2.9.4"},"dependencies":{"prop-types":"^15.6.0","react-router-dom":"^4.2.2"},"gitHead":"e421a8fd21a756a188742d3815b3710d09bdfdab","_id":"react-router-tabs@1.0.2","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-HKdrGWyEPCzdlqY6LesHV76Cyo3rRN+4pobfdpZtQBMGhSVmHnbvlj46jVIXp2qbK2l4iaThAFy9VOJqOAmuvg==","shasum":"445b67b95f2c620895b956e1ae2c4f7e5e403da6","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.0.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICFj5oqrg07qjQroMA1mLJ6AGEyOffbqNox/AwASJ61bAiAUtv2wayjZgzP3P+T21qaq4cxYQmGiY5kkctSBMj3SRg=="}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs-1.0.2.tgz_1510916871804_0.9709387372713536"},"directories":{}},"1.0.3":{"name":"react-router-tabs","version":"1.0.3","description":"Dead simple navigation tabs for React Router 4","main":"lib/index.js","scripts":{"start":"webpack-dev-server","build":"babel src -d lib","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":">=15"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","css-loader":"^0.28.7","html-webpack-plugin":"^2.30.1","react":"^16.1.1","react-dom":"^16.1.1","react-router-config":"^1.0.0-beta.4","style-loader":"^0.19.0","webpack":"^3.8.1","webpack-dev-server":"^2.9.4"},"dependencies":{"prop-types":"^15.6.0","react-router-dom":"^4.2.2"},"gitHead":"86968d81a6073f2b22d8cda480e337a105474039","_id":"react-router-tabs@1.0.3","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-IBF9jXAni4r5yuC6bxJUx0u1ZVRy1w3h/mo16qrwq3SSOwDEuxtnRtZVwPSCc+4gfYjfLdmyEzR7XvpTNI6UOA==","shasum":"0c40ca6b196d7da3b315a9d2d1e7d1386412a530","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.0.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBkWt5Er4A3ODiamRz18Bx7PyZa3MTLZHd5REtFbQi7tAiBkI57nUxsQHOpXvfF02q6R81AAsKIkzYof5V10g3KMGw=="}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs-1.0.3.tgz_1514651506942_0.7663026601076126"},"directories":{}},"1.1.0":{"name":"react-router-tabs","version":"1.1.0","description":"Dead simple navigation tabs for React Router 4","main":"lib/index.js","scripts":{"start":"webpack-dev-server","build":"babel src -d lib","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":">=15"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","css-loader":"^0.28.7","html-webpack-plugin":"^2.30.1","react":"^16.1.1","react-dom":"^16.1.1","react-router-config":"^1.0.0-beta.4","style-loader":"^0.19.0","webpack":"^3.8.1","webpack-dev-server":"^2.9.4"},"dependencies":{"prop-types":"^15.6.0","react-router-dom":"^4.2.2"},"gitHead":"684dab0c2ef6575f2014477073533bc1e629bc86","_id":"react-router-tabs@1.1.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-ILKt3Im0nsijNUR3JHS81IxIY4V6xSCt0yrOwFWAJrOO+9IQEEiN39fvadKz+jx12kNWHmUBuUfI8qSGt9x79A==","shasum":"58d25df1731c1b7f607005f60a12c68c828f6598","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.1.0.tgz","fileCount":10,"unpackedSize":188822,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhzhoZm8bJaYri9t5c+VtxaWXjXSCOs9o9ZA8b5S+JzAIhALY9FUI5dEuCdCK9P/l09iI31bH2ul67FApQgv+WkSD1"}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs_1.1.0_1518360094441_0.590826686748529"},"_hasShrinkwrap":false},"1.1.1":{"name":"react-router-tabs","version":"1.1.1","description":"Dead simple navigation tabs for React Router 4","main":"lib/index.js","scripts":{"start":"webpack-dev-server","build":"babel src -d lib","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":">=15"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","css-loader":"^0.28.7","html-webpack-plugin":"^2.30.1","react":"^16.1.1","react-dom":"^16.1.1","react-router-config":"^1.0.0-beta.4","style-loader":"^0.19.0","webpack":"^3.8.1","webpack-dev-server":"^2.9.4"},"dependencies":{"prop-types":"^15.6.0","react-router-dom":"^4.2.2"},"gitHead":"0b1934380e7dd875c84bece333a178077fcfcf72","_id":"react-router-tabs@1.1.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-YuWbqAzo6RV0FmawsjYOOdlJYmzJn4O1XZg03MQWy2BItHbYcZP6KR3tinUL0DrR1+0QqkacTpZexPRxbqs+Og==","shasum":"564db9aae301e7ace46681bafed3018c7fda428f","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.1.1.tgz","fileCount":10,"unpackedSize":188822,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiHkdVOkXAKwFUDZ/InR+zaLwuwK4nNkjPc1SZ9y4OfgIhANQLQzhEGMLkVUCn+vdgPQVjomOWJdSK9htfjppq1Kpe"}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs_1.1.1_1521720209035_0.19331724770993763"},"_hasShrinkwrap":false},"1.2.0":{"name":"react-router-tabs","version":"1.2.0","description":"Dead simple navigation tabs for React Router 4","main":"lib/index.js","scripts":{"start":"webpack-dev-server","build":"babel src -d lib","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":">=15"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","css-loader":"^0.28.7","html-webpack-plugin":"^2.30.1","react":"^16.1.1","react-dom":"^16.1.1","react-router-config":"^1.0.0-beta.4","style-loader":"^0.19.0","webpack":"^3.8.1","webpack-dev-server":"^2.9.4"},"dependencies":{"prop-types":"^15.6.0","react-router-dom":"^4.2.2"},"gitHead":"474fe5a824e9624786ee2c2e39e8affc85bbda9d","_id":"react-router-tabs@1.2.0","_npmVersion":"6.0.1","_nodeVersion":"8.11.1","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-b+TyktlcqZGo/owghaWSkleLJvG4bw0wxngD0ACRU24vK2z0V562qOxwHtA9CQzMniwbBUdPxT0Kw4E/p3421Q==","shasum":"c8ee46fe6803de923e260a6f4f7d47bb9b67cd75","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.2.0.tgz","fileCount":10,"unpackedSize":190392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJWcwCRA9TVsSAnZWagAAhBwP/1AQJFrXpCehCgfn2JxM\nH3pLn3csqgLwHyn+5DkpDtfUrPK2eCYc9lnvzXcxO2E1pSRoSie9Vf+GwUPS\n2xpM/fdHk77LHiMPRzmjxuBceAWp2AQF74khR0BRYdUG3LHTiA6mysGtdO5B\nwz0ruIaB8bSEe4YATeBfgCALz2q9G+OSWAUYHcVhsOF76+ehe9AUCrqHX6Y8\nGStrxZca1+uXeYuZBv66I5WhDiXoIpXUs1f3T46YcQ6WOV8BA4qeGF/L5koZ\nynWQWvFrfyAsjIn1E2Z0nT9RUdYUyEhO7G3ro9Vdcjduyl1Easjv4vyZW8g+\nLB+rO4fSQmJHSFS7HURT3uJR2swtbd33tG3zrJWddW+p9jgvPoKJ49Wn9fU5\nkebgwDg7wHFfQfOPlI0Bep0hsGj/XVw0nPuM+M/0T++NotPGC6vBWX4n4oSS\nV04HtbO3ScY1ziSUFH9BrgKcbCqynfaSSTN4gucuLDze4nIQ5u+i1CIia5bm\nBSQ4vsaThIADQrSqYi1Z9ki0wHzDoJDBHwHoexjyuvWQN/g0j8Bi+IhfD2Ha\ni+YvL7RrPC1onW20wy+YyUlhsWgLxzeSmLMrTxokOyE0kG4kuvpNx/H741UL\nnh1upXNdhFI0R5nnugmWvh9DDjWeeZkj30oe/LL9PWrMJJxKCcD5fWsJ3UZP\nnbls\r\n=Lt2i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzSc66SE6RvQwhZZpooh0TtgOdUcNIrMKAXaB1kEhsyAiBgIFymOrCuSy8FphJ2RColMrMrbpJtS3jwXtnEg82h/Q=="}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs_1.2.0_1529177902845_0.8221658289206362"},"_hasShrinkwrap":false},"1.3.0":{"name":"react-router-tabs","version":"1.3.0","description":"Dead simple navigation tabs for React Router","main":"index.js","module":"esm/react-router-tabs.js","sideEffects":false,"scripts":{"start":"webpack-dev-server","build":"rollup -c","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":">=15","react-router-dom":">=4.2.2"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-transform-runtime":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.5","css-loader":"^2.1.1","html-webpack-plugin":"^3.2.0","react":"^16.8.6","react-dom":"^16.8.6","react-router-config":"^5.0.0","react-router-dom":"^5.0.0","rollup":"^1.9.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^4.2.1","rollup-plugin-replace":"^2.1.1","rollup-plugin-uglify":"^6.0.2","style-loader":"^0.23.1","webpack":"^4.29.6","webpack-cli":"^3.3.0","webpack-dev-server":"^3.2.1"},"dependencies":{"prop-types":"^15.7.2"},"readme":"# React Router Tabs\r\n\r\n[![npm](https://img.shields.io/npm/v/react-router-tabs.svg)](https://www.npmjs.com/package/react-router-tabs)\r\n[![npm](https://img.shields.io/npm/dm/react-router-tabs.svg)](https://www.npmjs.com/package/react-router-tabs)\r\n[![GitHub stars](https://img.shields.io/github/stars/chacestew/react-router-tabs.svg?style=social&label=Stars)](https://github.com/chacestew/react-router-tabs)\r\n\r\nSimple navigation tabs for React Router 4 and 5.\r\n\r\n![preview-gif](https://user-images.githubusercontent.com/21122529/32943041-911cf582-cb93-11e7-831e-6765a299326d.gif)\r\n\r\n## Why?\r\n\r\nThere are many plain React solutions for tabs that conditionally render content based on some local state. In a [React Router](https://github.com/ReactTraining/react-router) app it would be preferable to keep rendering logic consistent by only using `<Route />` components. This library exports a simple component called **`<NavTab />`** which wraps React Router's [Link](https://reacttraining.com/react-router/web/api/Link) and makes it behave more like a tab.\r\n\r\n### Benefits of this library\r\n\r\n- Simplifies assigning tabs to paths\r\n- Abstracts matching, setting active styles and onClick handling\r\n- **`<RoutedTabs />`** compound component lets you set props for nested tabs (classnames, styles, path prefix, ...others)\r\n- Easy to use with different route setups (see examples)\r\n- Uses React Router's own API\r\n- No state, no assertions about tab content, just navigation\r\n\r\n## Installation\r\n\r\nvia [yarn](https://www.yarnpkj.com/)\r\n\r\n    $ yarn add react-router-tabs\r\n\r\nor [npm](https://www.npm.com/)\r\n\r\n    $ npm install --save react-router-tabs\r\n\r\n#### Dependencies\r\n\r\n- react-router-dom\r\n- prop-types\r\n\r\n#### Peer dependencies\r\n\r\n- react\r\n\r\n## Usage\r\n\r\n```js\r\nimport React from \"react\";\r\nimport { Route, Switch, Redirect } from \"react-router-dom\";\r\nimport { RoutedTabs, NavTab } from \"react-router-tabs\";\r\nimport { Admins, Moderators, Users } from \"./components\";\r\n\r\n// with default styles:\r\nimport \"styles/react-router-tabs.css\";\r\n\r\nconst UsersPage = ({ match }) => {\r\n  return (\r\n    <div>\r\n      <NavTab to=\"/admins\">Admins</NavTab>\r\n      <NavTab to=\"/moderators\">Moderators</NavTab>\r\n      <NavTab to=\"/users\">Users</NavTab>\r\n\r\n      <Switch>\r\n        <Route\r\n          exact\r\n          path={`${match.path}`}\r\n          render={() => <Redirect replace to={`${match.path}/admins`} />}\r\n        />\r\n        <Route path={`${match.path}/admins`} component={Admins} />\r\n        <Route path={`${match.path}/moderators`} component={Moderators} />\r\n        <Route path={`${match.path}/users`} component={Users} />\r\n      </Switch>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default UsersPage;\r\n```\r\n\r\n## Components\r\n\r\n#### `<NavTab />`\r\n\r\nForked and adapted from React Router's [`<NavLink />`](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js). More info on below props in the official React Router docs.\r\n\r\n| Prop               | Type   | Default      | Description                                                    |\r\n| ------------------ | ------ | ------------ | -------------------------------------------------------------- |\r\n| to                 | string | **required** | Path to the route to be rendered                               |\r\n| replace            | bool   | true         | Replace current browser path rather than adding to the history |\r\n| exact              | bool   | false        | Require exact path match for active styling                    |\r\n| strict             | bool   | true         | Trailing slash considered for path match                       |\r\n| disabled           | bool   | false        | Disables clicking on this tab                                  |\r\n| allowClickOnActive | bool   | false        | Allows clicking even when active                               |\r\n| className          | string | 'nav-tab'    | Custom className for this tab                                  |\r\n| activeClassName    | string | 'active'     | Custom activeClassName for this tab                            |\r\n| style              | object | empty        | Custom inline style                                            |\r\n| activeStyle        | object | empty        | Custom inline style when active                                |\r\n\r\n---\r\n\r\n#### `<RoutedTabs />` (optional)\r\n\r\nHelper compound component to pass props to all child **`<NavTab>`** components. Renders as a `div` by default.\r\n\r\n```js\r\n<RoutedTabs\r\n  startPathWith={match.path}\r\n  tabClassName=\"tab-link\"\r\n  activeTabClassName=\"active\"\r\n>\r\n  <NavTab to=\"/admins\">Admins</NavTab> // links to `${match.path}/admins`\r\n  <NavTab to=\"/moderators\">Moderators</NavTab>\r\n  <NavTab to=\"/users\">Users</NavTab>\r\n  // etc\r\n</RoutedTabs>\r\n```\r\n\r\n**NB**: **`NavTab`** must be the direct child of **`RoutedTabs`** for it to do anything. If a standard DOM element is detected, no props will be passed down. If your DOM tree requires more complex nesting, you probably don't want to use this helper.\r\n\r\n| Prop               | Type   | Default             | Description                                                                                                                                   |\r\n| ------------------ | ------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| startPathWith      | string | empty               | String to append to the start of every tab's `path` to simplify writing out full paths. In most cases this should be given `props.match.path` |\r\n| elementType        | string | 'div'               | The element to render as the container                                                                                                        |\r\n| className          | string | 'react-router-tabs' | className for the container                                                                                                                   |\r\n| style              | object | empty               | Styles for the container                                                                                                                      |\r\n| tabClassName       | string | 'nav-tab'           | className to be provided to each tab                                                                                                          |\r\n| activeTabClassName | string | 'active'            | activeClassName to be provided to each tab                                                                                                    |\r\n| tabStyle           | object | empty               | Styles to be provided to each tab                                                                                                             |\r\n| activeTabStyle     | object | empty               | Styles to be provided to each tab                                                                                                             |\r\n| ... others         | any    | none                | Any other props RoutedTabs doesn't expect will be passed to its children                                                                      |\r\n\r\n## Styling\r\n\r\n**`<NavTab>`** can take a `className` and `activeClassName`, and/or `style` and `activeStyle` props. If no classes are provided, it will be given defaults (see API above).\r\n\r\n**`<RoutedTabs>`** can also be provided with `tabClassName` prop to pass to its children. This will be overwritten if the **`<NavTab>`** has its own `className` prop.\r\n\r\nA default stylesheet is provided in both .css and .scss at:\r\n\r\n`node_modules/react-router-tabs/styles/react-router-tabs`\r\n\r\nPlease note these styles have not been tested and are provided mainly as an example to work from.\r\n\r\n## Acknowledgements\r\n\r\nThanks to the [React Router](https://github.com/ReactTraining/react-router) team. This module only exists to simplify one of a thousand use-cases for their great library.\r\n\r\n## Author\r\n\r\nChace Stewart (<chacestew@gmail.com>)\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","gitHead":"d35a564733e6978c3fd7b475721c1d1998015f16","_id":"react-router-tabs@1.3.0","_npmVersion":"6.4.1","_nodeVersion":"10.14.2","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-fuWMaltyrhDmaO2k5AeWNLT628c9IrZ7S8PlKjkgZbej1K6F2gfCMeJj8/tHVdpt53LisM+2tzlW6tsYJTFFow==","shasum":"b6b36d5eb85a49e0d3e443c069433a63dc96d0eb","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.3.0.tgz","fileCount":8,"unpackedSize":190960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqllkCRA9TVsSAnZWagAAg1oP/1Z19f5TOF1T5mZ820Au\nnq9c+rhjPBP/2vu2cyjUa7BQm+IzT8TZu7KTh9Q4eXcFATggD3Im9peAOrYC\nm4YhZ0+sbT8mROQKK/xQGb1fZx22RErZYlt5+1R6WtgbBQvrOo7aGNdugnNL\n/i9FtK1xFyGic3G2zvSvz68BmxDM7Wzs0h4d3tbdZOcqFyolvGv8fiQUWjL2\nbuvk3mlVNACJYkIdx34GhCAyWVPN5T/Bd/+JGblNvMgf9KWEN+TNK9uZAKsI\nFYOU0TObjcWMbkeFMmK1liAqElqS0V8WhAwcAhMi1/NoiTRGLu8mQTUvKTYi\n09GEp0X3MwkcsuKGtWiJ+OGrS/E9JHLymwTEg96y4DiIfJwtU1W3US3Fhr5o\njS7ICjMqp7swkGAZ1pzV6H53waAgq2hI9XjpQUtfu0Wq7j8Q5my8tuAKTF+h\nPMJXJZnqXRK50x58j7mkutLywOLh9rZ7Khdf4aERN41HqLJIs3ziGrZvcRvM\njoPsO4cSZO/FPRbzzj3lUrf6FKX26VMOCgVz+SiSu7RTqLTkmHUTvyZHOfyu\niHt44ZGt5hytv8d5+rZ8SppATnZ/5Sh89IoMg0de5whmNjeMSUVF5IN4b92Y\nmEbWyc8SpT2BfbLqf4F/4r7ArqtOsIId+lsTb6LoPGH78lsLkijp+z202PtF\nScN/\r\n=xxYq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyshog4rXWDkohZKLDFHI/zlPiCcNIaSZOYBg0GTZIzQIgLUSJKQM4BnZx4r2DwgA9d0q0O/3KD6/7BUQ09N3Zgl8="}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs_1.3.0_1554667876046_0.6548733931593729"},"_hasShrinkwrap":false},"1.3.1":{"name":"react-router-tabs","version":"1.3.1","description":"Dead simple navigation tabs for React Router","main":"index.js","module":"esm/react-router-tabs.js","sideEffects":false,"scripts":{"start":"webpack-dev-server","build":"rollup -c","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":">=15","react-router-dom":">=4.2.2"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-transform-runtime":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.5","css-loader":"^2.1.1","html-webpack-plugin":"^3.2.0","react":"^16.8.6","react-dom":"^16.8.6","react-router-config":"^5.0.0","react-router-dom":"^5.0.0","rollup":"^1.9.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^4.2.1","rollup-plugin-replace":"^2.1.1","rollup-plugin-uglify":"^6.0.2","style-loader":"^0.23.1","webpack":"^4.29.6","webpack-cli":"^3.3.0","webpack-dev-server":"^3.2.1"},"dependencies":{"prop-types":"^15.7.2"},"readme":"# React Router Tabs\r\n\r\n[![npm](https://img.shields.io/npm/v/react-router-tabs.svg)](https://www.npmjs.com/package/react-router-tabs)\r\n[![npm](https://img.shields.io/npm/dm/react-router-tabs.svg)](https://www.npmjs.com/package/react-router-tabs)\r\n[![GitHub stars](https://img.shields.io/github/stars/chacestew/react-router-tabs.svg?style=social&label=Stars)](https://github.com/chacestew/react-router-tabs)\r\n\r\nSimple navigation tabs for React Router 4 and 5.\r\n\r\n![preview-gif](https://user-images.githubusercontent.com/21122529/32943041-911cf582-cb93-11e7-831e-6765a299326d.gif)\r\n\r\n## Why?\r\n\r\nThere are many plain React solutions for tabs that conditionally render content based on some local state. In a [React Router](https://github.com/ReactTraining/react-router) app it would be preferable to keep rendering logic consistent by only using `<Route />` components. This library exports a simple component called **`<NavTab />`** which wraps React Router's [Link](https://reacttraining.com/react-router/web/api/Link) and makes it behave more like a tab.\r\n\r\n### Benefits of this library\r\n\r\n- Simplifies assigning tabs to paths\r\n- Abstracts matching, setting active styles and onClick handling\r\n- **`<RoutedTabs />`** compound component lets you set props for nested tabs (classnames, styles, path prefix, ...others)\r\n- Easy to use with different route setups (see examples)\r\n- Uses React Router's own API\r\n- No state, no assertions about tab content, just navigation\r\n\r\n## Installation\r\n\r\nvia [yarn](https://www.yarnpkj.com/)\r\n\r\n    $ yarn add react-router-tabs\r\n\r\nor [npm](https://www.npm.com/)\r\n\r\n    $ npm install --save react-router-tabs\r\n\r\n#### Dependencies\r\n\r\n- react-router-dom\r\n- prop-types\r\n\r\n#### Peer dependencies\r\n\r\n- react\r\n\r\n## Usage\r\n\r\n```js\r\nimport React from \"react\";\r\nimport { Route, Switch, Redirect } from \"react-router-dom\";\r\nimport { RoutedTabs, NavTab } from \"react-router-tabs\";\r\nimport { Admins, Moderators, Users } from \"./components\";\r\n\r\n// with default styles:\r\nimport \"styles/react-router-tabs.css\";\r\n\r\nconst UsersPage = ({ match }) => {\r\n  return (\r\n    <div>\r\n      <NavTab to=\"/admins\">Admins</NavTab>\r\n      <NavTab to=\"/moderators\">Moderators</NavTab>\r\n      <NavTab to=\"/users\">Users</NavTab>\r\n\r\n      <Switch>\r\n        <Route\r\n          exact\r\n          path={`${match.path}`}\r\n          render={() => <Redirect replace to={`${match.path}/admins`} />}\r\n        />\r\n        <Route path={`${match.path}/admins`} component={Admins} />\r\n        <Route path={`${match.path}/moderators`} component={Moderators} />\r\n        <Route path={`${match.path}/users`} component={Users} />\r\n      </Switch>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default UsersPage;\r\n```\r\n\r\n## Components\r\n\r\n#### `<NavTab />`\r\n\r\nForked and adapted from React Router's [`<NavLink />`](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js). More info on below props in the official React Router docs.\r\n\r\n| Prop               | Type   | Default      | Description                                                    |\r\n| ------------------ | ------ | ------------ | -------------------------------------------------------------- |\r\n| to                 | string | **required** | Path to the route to be rendered                               |\r\n| replace            | bool   | true         | Replace current browser path rather than adding to the history |\r\n| exact              | bool   | false        | Require exact path match for active styling                    |\r\n| strict             | bool   | true         | Trailing slash considered for path match                       |\r\n| disabled           | bool   | false        | Disables clicking on this tab                                  |\r\n| allowClickOnActive | bool   | false        | Allows clicking even when active                               |\r\n| className          | string | 'nav-tab'    | Custom className for this tab                                  |\r\n| activeClassName    | string | 'active'     | Custom activeClassName for this tab                            |\r\n| style              | object | empty        | Custom inline style                                            |\r\n| activeStyle        | object | empty        | Custom inline style when active                                |\r\n\r\n---\r\n\r\n#### `<RoutedTabs />` (optional)\r\n\r\nHelper compound component to pass props to all child **`<NavTab>`** components. Renders as a `div` by default.\r\n\r\n```js\r\n<RoutedTabs\r\n  startPathWith={match.path}\r\n  tabClassName=\"tab-link\"\r\n  activeTabClassName=\"active\"\r\n>\r\n  <NavTab to=\"/admins\">Admins</NavTab> // links to `${match.path}/admins`\r\n  <NavTab to=\"/moderators\">Moderators</NavTab>\r\n  <NavTab to=\"/users\">Users</NavTab>\r\n  // etc\r\n</RoutedTabs>\r\n```\r\n\r\n**NB**: **`NavTab`** must be the direct child of **`RoutedTabs`** for it to do anything. If a standard DOM element is detected, no props will be passed down. If your DOM tree requires more complex nesting, you probably don't want to use this helper.\r\n\r\n| Prop               | Type   | Default             | Description                                                                                                                                   |\r\n| ------------------ | ------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| startPathWith      | string | empty               | String to append to the start of every tab's `path` to simplify writing out full paths. In most cases this should be given `props.match.path` |\r\n| elementType        | string | 'div'               | The element to render as the container                                                                                                        |\r\n| className          | string | 'react-router-tabs' | className for the container                                                                                                                   |\r\n| style              | object | empty               | Styles for the container                                                                                                                      |\r\n| tabClassName       | string | 'nav-tab'           | className to be provided to each tab                                                                                                          |\r\n| activeTabClassName | string | 'active'            | activeClassName to be provided to each tab                                                                                                    |\r\n| tabStyle           | object | empty               | Styles to be provided to each tab                                                                                                             |\r\n| activeTabStyle     | object | empty               | Styles to be provided to each tab                                                                                                             |\r\n| ... others         | any    | none                | Any other props RoutedTabs doesn't expect will be passed to its children                                                                      |\r\n\r\n## Styling\r\n\r\n**`<NavTab>`** can take a `className` and `activeClassName`, and/or `style` and `activeStyle` props. If no classes are provided, it will be given defaults (see API above).\r\n\r\n**`<RoutedTabs>`** can also be provided with `tabClassName` prop to pass to its children. This will be overwritten if the **`<NavTab>`** has its own `className` prop.\r\n\r\nA default stylesheet is provided in both .css and .scss at:\r\n\r\n`node_modules/react-router-tabs/styles/react-router-tabs`\r\n\r\nPlease note these styles have not been tested and are provided mainly as an example to work from.\r\n\r\n## Acknowledgements\r\n\r\nThanks to the [React Router](https://github.com/ReactTraining/react-router) team. This module only exists to simplify one of a thousand use-cases for their great library.\r\n\r\n## Author\r\n\r\nChace Stewart (<chacestew@gmail.com>)\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","gitHead":"705c4f03b92b6869be370c7ffc44c6f392783512","_id":"react-router-tabs@1.3.1","_npmVersion":"6.4.1","_nodeVersion":"10.14.2","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-keleqvC8MkahVFSNC4EjEFG0ct3I0FsEIxf+kIoiOxAFSdCKQ954c4fSpdZ7TO+VAm5AZm4qRrcp+frn8Pfk8A==","shasum":"724dd9f97554dd075bd18119e61aa393a7a7ee82","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.3.1.tgz","fileCount":11,"unpackedSize":203559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqlyfCRA9TVsSAnZWagAAW7gP/RPzJNGu+94/yuVuj8FD\nGERVIH/882cH+jZGUo3LwYWRgR108rYT5D3khkxGafAQy2ueWp5d7V0+x3VH\nYra07sAp4BEJ1feV37/8hdT/hHYmFxy9MAiovfjaZrARDmEuFezqgviMz8Kk\nvayrPo1fxROyWu5AkSCxDU+fb6QJwC56t+ki7597S9c6sZCihbecZvNxVTKM\nlRn/eknHdBj2/iYl813iM8pPcNJ1qXozgWbFMk5dOvKjyfQSXhAvYRQiSjg5\nPZSmIMyEAgfbXZcaXAuJAWk9W1R/hA9gu4r9ySRkEeEmGb9INEip+PwK3QQ7\nC7qN/cyHEs9hC0HyUhpe0Fo02GNyvWuDX40jIfWCXQFUCfNV7vm5QH0fqJQC\nBJkwErPzAPVILlPLahe+4H9qMFTDSEe8xvqdchKH0QSIgVpHfQ6Mx783KQLe\n/+EfKcp3xWlmjSFkGfhgo02JYwJ/48n+T4OG9Q1W4mpsHp4IMb1rBte0Ji3M\n8zGRG+f1lWF3s86fwDo6Yo0kkh6zfeaLKIa+m0ACqLD5QYXz6bp7j4kzjdbQ\nbFLTe/UxvLvAEgknxHKzmx2RoHH6ljr6ON5jpgTkUEoA2Fp1B195pf/kVp13\nEo7ufz4h6jlk4viJ78G/zaINlkY4xhsuwi/ZisSuWFN2ijdPSnYHcEgQ8QWh\n6APb\r\n=4CVB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDK2wOGhYS2rewtwN2C5Ns9lbtaRu8RG7mc3opVz7htTAIgQyzhwUJTjXswX8SUygUd8l7NyKwvseCvmldoghc9UCM="}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs_1.3.1_1554668703055_0.09076931615242634"},"_hasShrinkwrap":false},"1.3.2":{"name":"react-router-tabs","version":"1.3.2","description":"Dead simple navigation tabs for React Router","main":"index.js","module":"esm/react-router-tabs.js","sideEffects":false,"scripts":{"start":"webpack-dev-server","build":"rollup -c","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"license":"MIT","bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","peerDependencies":{"react":">=15","react-router-dom":">=4.2.2"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-transform-runtime":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.5","css-loader":"^2.1.1","html-webpack-plugin":"^3.2.0","react":"^16.8.6","react-dom":"^16.8.6","react-router-config":"^5.0.0","react-router-dom":"^5.0.0","rollup":"^1.9.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^4.2.1","rollup-plugin-replace":"^2.1.1","rollup-plugin-uglify":"^6.0.2","style-loader":"^0.23.1","webpack":"^4.29.6","webpack-cli":"^3.3.0","webpack-dev-server":"^3.2.1"},"dependencies":{"@babel/runtime":"^7.4.3","prop-types":"^15.7.2"},"readme":"# React Router Tabs\r\n\r\n[![npm](https://img.shields.io/npm/v/react-router-tabs.svg)](https://www.npmjs.com/package/react-router-tabs)\r\n[![npm](https://img.shields.io/npm/dm/react-router-tabs.svg)](https://www.npmjs.com/package/react-router-tabs)\r\n[![GitHub stars](https://img.shields.io/github/stars/chacestew/react-router-tabs.svg?style=social&label=Stars)](https://github.com/chacestew/react-router-tabs)\r\n\r\nSimple navigation tabs for React Router 4 and 5.\r\n\r\n![preview-gif](https://user-images.githubusercontent.com/21122529/32943041-911cf582-cb93-11e7-831e-6765a299326d.gif)\r\n\r\n## Why?\r\n\r\nThere are many plain React solutions for tabs that conditionally render content based on some local state. In a [React Router](https://github.com/ReactTraining/react-router) app it would be preferable to keep rendering logic consistent by only using `<Route />` components. This library exports a simple component called **`<NavTab />`** which wraps React Router's [Link](https://reacttraining.com/react-router/web/api/Link) and makes it behave more like a tab.\r\n\r\n### Benefits of this library\r\n\r\n- Simplifies assigning tabs to paths\r\n- Abstracts matching, setting active styles and onClick handling\r\n- **`<RoutedTabs />`** compound component lets you set props for nested tabs (classnames, styles, path prefix, ...others)\r\n- Easy to use with different route setups (see examples)\r\n- Uses React Router's own API\r\n- No state, no assertions about tab content, just navigation\r\n\r\n## Installation\r\n\r\nvia [yarn](https://www.yarnpkj.com/)\r\n\r\n    $ yarn add react-router-tabs\r\n\r\nor [npm](https://www.npm.com/)\r\n\r\n    $ npm install --save react-router-tabs\r\n\r\n#### Dependencies\r\n\r\n- react-router-dom\r\n- prop-types\r\n\r\n#### Peer dependencies\r\n\r\n- react\r\n\r\n## Usage\r\n\r\n```js\r\nimport React from \"react\";\r\nimport { Route, Switch, Redirect } from \"react-router-dom\";\r\nimport { RoutedTabs, NavTab } from \"react-router-tabs\";\r\nimport { Admins, Moderators, Users } from \"./components\";\r\n\r\n// with default styles:\r\nimport \"styles/react-router-tabs.css\";\r\n\r\nconst UsersPage = ({ match }) => {\r\n  return (\r\n    <div>\r\n      <NavTab to=\"/admins\">Admins</NavTab>\r\n      <NavTab to=\"/moderators\">Moderators</NavTab>\r\n      <NavTab to=\"/users\">Users</NavTab>\r\n\r\n      <Switch>\r\n        <Route\r\n          exact\r\n          path={`${match.path}`}\r\n          render={() => <Redirect replace to={`${match.path}/admins`} />}\r\n        />\r\n        <Route path={`${match.path}/admins`} component={Admins} />\r\n        <Route path={`${match.path}/moderators`} component={Moderators} />\r\n        <Route path={`${match.path}/users`} component={Users} />\r\n      </Switch>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default UsersPage;\r\n```\r\n\r\n## Components\r\n\r\n#### `<NavTab />`\r\n\r\nForked and adapted from React Router's [`<NavLink />`](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js). More info on below props in the official React Router docs.\r\n\r\n| Prop               | Type   | Default      | Description                                                    |\r\n| ------------------ | ------ | ------------ | -------------------------------------------------------------- |\r\n| to                 | string | **required** | Path to the route to be rendered                               |\r\n| replace            | bool   | true         | Replace current browser path rather than adding to the history |\r\n| exact              | bool   | false        | Require exact path match for active styling                    |\r\n| strict             | bool   | true         | Trailing slash considered for path match                       |\r\n| disabled           | bool   | false        | Disables clicking on this tab                                  |\r\n| allowClickOnActive | bool   | false        | Allows clicking even when active                               |\r\n| className          | string | 'nav-tab'    | Custom className for this tab                                  |\r\n| activeClassName    | string | 'active'     | Custom activeClassName for this tab                            |\r\n| style              | object | empty        | Custom inline style                                            |\r\n| activeStyle        | object | empty        | Custom inline style when active                                |\r\n\r\n---\r\n\r\n#### `<RoutedTabs />` (optional)\r\n\r\nHelper compound component to pass props to all child **`<NavTab>`** components. Renders as a `div` by default.\r\n\r\n```js\r\n<RoutedTabs\r\n  startPathWith={match.path}\r\n  tabClassName=\"tab-link\"\r\n  activeTabClassName=\"active\"\r\n>\r\n  <NavTab to=\"/admins\">Admins</NavTab> // links to `${match.path}/admins`\r\n  <NavTab to=\"/moderators\">Moderators</NavTab>\r\n  <NavTab to=\"/users\">Users</NavTab>\r\n  // etc\r\n</RoutedTabs>\r\n```\r\n\r\n**NB**: **`NavTab`** must be the direct child of **`RoutedTabs`** for it to do anything. If a standard DOM element is detected, no props will be passed down. If your DOM tree requires more complex nesting, you probably don't want to use this helper.\r\n\r\n| Prop               | Type   | Default             | Description                                                                                                                                   |\r\n| ------------------ | ------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| startPathWith      | string | empty               | String to append to the start of every tab's `path` to simplify writing out full paths. In most cases this should be given `props.match.path` |\r\n| elementType        | string | 'div'               | The element to render as the container                                                                                                        |\r\n| className          | string | 'react-router-tabs' | className for the container                                                                                                                   |\r\n| style              | object | empty               | Styles for the container                                                                                                                      |\r\n| tabClassName       | string | 'nav-tab'           | className to be provided to each tab                                                                                                          |\r\n| activeTabClassName | string | 'active'            | activeClassName to be provided to each tab                                                                                                    |\r\n| tabStyle           | object | empty               | Styles to be provided to each tab                                                                                                             |\r\n| activeTabStyle     | object | empty               | Styles to be provided to each tab                                                                                                             |\r\n| ... others         | any    | none                | Any other props RoutedTabs doesn't expect will be passed to its children                                                                      |\r\n\r\n## Styling\r\n\r\n**`<NavTab>`** can take a `className` and `activeClassName`, and/or `style` and `activeStyle` props. If no classes are provided, it will be given defaults (see API above).\r\n\r\n**`<RoutedTabs>`** can also be provided with `tabClassName` prop to pass to its children. This will be overwritten if the **`<NavTab>`** has its own `className` prop.\r\n\r\nA default stylesheet is provided in both .css and .scss at:\r\n\r\n`node_modules/react-router-tabs/styles/react-router-tabs`\r\n\r\nPlease note these styles have not been tested and are provided mainly as an example to work from.\r\n\r\n## Acknowledgements\r\n\r\nThanks to the [React Router](https://github.com/ReactTraining/react-router) team. This module only exists to simplify one of a thousand use-cases for their great library.\r\n\r\n## Author\r\n\r\nChace Stewart (<chacestew@gmail.com>)\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","gitHead":"84756504cf613201365d43ed18b969c9ee9397b8","_id":"react-router-tabs@1.3.2","_npmVersion":"6.4.1","_nodeVersion":"10.14.2","_npmUser":{"name":"chacestew","email":"chacestew@gmail.com"},"dist":{"integrity":"sha512-RZLes3fUTDP4EvDuAOxXt7MRvW2Wpla1ToiNO6E3wEHJs51r4SE7UkVmqou/sBOaUvigweDcaf4f8huNiCGGzA==","shasum":"62fd289679f7ddcd5141ae50cb6a3775343e41a1","tarball":"https://registry.npmjs.org/react-router-tabs/-/react-router-tabs-1.3.2.tgz","fileCount":11,"unpackedSize":203592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq0waCRA9TVsSAnZWagAA0asQAJ60bRHtqmh2IsnK8UHy\nOHj5b0nqOJMUz5RsErqysJhxsAlkmPCsM+4z5v/OhCmkQzzX0W17G35bqd85\nMtNVHDnQXWzAqD6AzNYQAV4fTVCammfVYHzgPLiOv0L/+ruBpNGm8eEZ8TqP\n/suL28WBLcgB2V3fWk8LRH1eAUDDJSkSfYxiuG84vMAhAAiHux0JIK3WhE3W\nYbA95XaLMyZ8g2MXrnKK1N3aYWXSPO2IUNguRdKdZqTmLaSJUjvH5hSyFVK0\ne46d9LkIA80GwHck8lWJ4YniFlg1KdfJoIVVuG70VHnR8vGe8KA0f/jAtp7G\n1DXuGQx2AqSLwU1G+24LrsQzt+Y1wxH8bIE7fmuV/vF7soDdChXatE9JEhRX\n4rE3cjOi4W6r8LpbdY4IgkrMv61J06sZ0IZPXv/UeDDdeyPYpAyDyWb1m9XO\nPw16AM8+k+yWnSFtWFnIuakj40y+UI9Vt15LEWgIy/GhfmN14C6uhd2/ooUy\nmEImn1aJlMmLlAl2NYMNF5a7j8TzitiBwVGRbPA96YDsEC+Tf+UNN1diWSdv\nzoVX2zwaEdlDJOaWxLgk58p8XT4vDBQ9dHO/RajMN3IC6vpRQr3gm85nPf2V\n5FKKz5iQawNU4/ex+kafPc49eby8m9s5foXrKXd5qjVwa816/sJaQNKgYbOf\nHMTR\r\n=yIt0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmIhtw/ax2fpCqzmjxTCqYq5Z7aDPflG3ixyCzh+g7+QIgYMpVSqtJBJ3LBpuHf8WSKdh+Lsf4FvTzLQ07X8vZS+I="}]},"maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-tabs_1.3.2_1554730010019_0.15388940084775204"},"_hasShrinkwrap":false}},"readme":"","maintainers":[{"name":"chacestew","email":"chacestew@gmail.com"}],"time":{"modified":"2022-05-15T03:11:10.284Z","created":"2017-11-16T20:51:46.882Z","1.0.0":"2017-11-16T20:51:46.882Z","1.0.1":"2017-11-16T21:00:21.845Z","1.0.2":"2017-11-17T11:07:51.889Z","1.0.3":"2017-12-30T16:31:47.047Z","1.1.0":"2018-02-11T14:41:34.611Z","1.1.1":"2018-03-22T12:03:29.100Z","1.2.0":"2018-06-16T19:38:22.999Z","1.3.0":"2019-04-07T20:11:16.156Z","1.3.1":"2019-04-07T20:25:03.211Z","1.3.2":"2019-04-08T13:26:50.177Z"},"homepage":"https://github.com/chacestew/react-router-tabs#readme","keywords":["router-tabs","routed-tabs","nav-tab","react-tabs","tab-component","tab","tabs","tabbed","navigation","component","react","router"],"repository":{"type":"git","url":"git+https://github.com/chacestew/react-router-tabs.git"},"author":{"name":"Chace Stewart","email":"chacestew@gmail.com","url":"https://github.com/chacestew"},"bugs":{"url":"https://github.com/chacestew/react-router-tabs/issues"},"license":"MIT","readmeFilename":"","users":{"chacestew":true}}