{"_id":"@ampa/nextjs","_rev":"1-d707c820fb563959eb21c4fe30afe4ca","name":"@ampa/nextjs","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@ampa/nextjs","main":"dist/index.js","version":"1.0.1","repository":{"type":"git","url":"git+ssh://git@github.com/Uncleseneca/ampa.git"},"author":{"name":"uncleseneca","email":"uncleseneca@gmail.com"},"license":"MIT","devDependencies":{"@solid-soda/scripts":"^1.3.0","@team-griffin/install-self-peers":"^1.1.1","@types/react":"^16.8.10","rimraf":"^2.6.3","typescript":"^3.3.3333"},"husky":{"hooks":{"pre-commit":"yarn soda lint-staged","commit-msg":"yarn soda commitlint"}},"publishConfig":{"access":"public"},"scripts":{"s":"yarn soda","build":"rimraf dist && tsc","prepare":"install-self-peers -- --ignore-scripts && yarn build"},"peerDependencies":{"next":">=7.0.0","react":">= 16.0.0","react-dom":">= 16.0.0"},"dependencies":{"lodash":"^4.17.11","path-to-regexp":"^3.0.0","react-transition-group":"^2.5.3"},"gitHead":"b3293150ea66151a69ef69e228b1892c17f6ac7b","description":"## Why?","bugs":{"url":"https://github.com/Uncleseneca/ampa/issues"},"homepage":"https://github.com/Uncleseneca/ampa#readme","_id":"@ampa/nextjs@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"8.15.1","_npmUser":{"name":"uncleseneca","email":"uncleseneca@gmail.com"},"dist":{"integrity":"sha512-wqb9GHWwav2HEtC6mnqqBPdkm0JOwSzG//j06DpaDXYmkXnljSTNs6Nn50FMtj1cXHMCwUFv2NBC+Z1iTTzsRA==","shasum":"2c6e7c48a939c609f143d69dc2148c6e82d722e6","tarball":"https://registry.npmjs.org/@ampa/nextjs/-/nextjs-1.0.1.tgz","fileCount":9178,"unpackedSize":49479890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoge/CRA9TVsSAnZWagAACmgP/jUG2Z+0IVxQhSgoSfSi\nPPupP+W2ZYGyHoZUsZlWb6mknB3ieyCzJBySyHhQmt99L7x7Msvj5SwRTP7y\nvFg2iWCK+7jk1L6HDV2/N7imlMVLI16ZF5L4paXXODWohJGNJArq1fb9amjT\n5hO/xDtw4vzoaF86UYHKvTDxwnKryPOk6+8ZebVYnBmFdEdqJtwpQQrzWGIh\nmwN/KXNso2g6zKuodqHvkf3zEIkj59xOnbR3hfZgzTm/ZKbP8yQmx94i8uZj\nmI6Q7o53BFq7VaY1DQHZpmbhbQQdcjtr38Od6QcsVlS6HZ1l7zxAavEDOpQ/\nl1Az0qQ4IjBhWUSa6ZsBCKg6ZXBdSag0nfzg8ieapqD2JXydSZ/kXVzQi94R\nF/H4TIxwfvF82OT8MNZaa1Opv0hJuvOizoJT5j8+zC82sKUJvFzWGniVFdlL\nEYDAcRef/3Km2utOob1VObUM2+wdXpBHhvtgkcMN9W0yeV1HcqxbhdDHwR4G\nK8LRzwbtw09zdpHDIHxCp97vNDaRwXloOGtoxKUiv5FPacDf+cURYyuw3Byp\n/klwUgEpCDNl5bOqJMXiaPKQ+cNg02rXuIu1nmnJ5IKRFAHwfkngx4FxtCAS\nuMHeOeorV4ECM+12EnmvGFl+XhwzX0fhu8pV0jYD4qdDeHUNT9NpdPQ8DmUY\nlXD4\r\n=J7/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAi5UL0KVPqCAtdFrjaQCLkA83AxxN6tAwTLtmzQMKLLAiBPtXiggC+BTTLmQ84xnlJvQBfXfsXbXv8JG5h4uqa5yA=="}]},"maintainers":[{"name":"uncleseneca","email":"uncleseneca@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/nextjs_1.0.1_1554122686143_0.7503642360259029"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-01T12:44:45.961Z","1.0.1":"2019-04-01T12:44:46.595Z","modified":"2022-04-04T13:51:22.335Z"},"maintainers":[{"name":"uncleseneca","email":"uncleseneca@gmail.com"}],"description":"## Why?","homepage":"https://github.com/Uncleseneca/ampa#readme","repository":{"type":"git","url":"git+ssh://git@github.com/Uncleseneca/ampa.git"},"author":{"name":"uncleseneca","email":"uncleseneca@gmail.com"},"bugs":{"url":"https://github.com/Uncleseneca/ampa/issues"},"license":"MIT","readme":"# @ampa/nextjs\n\n## Why?\n\nTo create page transitions with nextjs router without pain\n\nAllows to create route-based animations (different animations for different route combinations)\n\n## Install\n\n```sh\nyarn add @ampa/nextjs\n```\n\n## Usage\n\nTo start annimating pages you need to do 2 things (there is an example below):\n\n- make animations config with CSS transitions\n- wrap your page component with `<Ampa />`\n\n## Example:\n\n### 1) config\n\nWe use express-like routes and classNames list from react-transition group\n\n```\nconst routeAnimations = [\n  {\n    prevRoute: '/home',\n    nextRoute: '/career/:id',\n    styles: {\n      enter: 'my-enter',\n      enterActive: 'my-active-enter',\n      exit: 'my-exit',\n      exitActive: 'my-active-exit',\n    },\n  },\n\n  // or if you're using CSS-modules you can import whole CSS file, where classes named like 'enter', 'enterActive' etc\n  {\n    prevRoute: '/about',\n    nextRoute: '/home',\n    styles: backwardsCSSfile,\n  },\n]\n```\n\n### 2) `<Ampa />`\n\n```\nimport { Ampa } from '@ampa/nextjs' // the core component\n...\n  <Ampa\n    timeout={{ enter: 500, exit: 500 }}\n    routeAnimations={routeAnimations}\n  >\n    <Component {...pageProps} />\n  </PageTransition>\n```\n\n## Example\n\nAvailable in [example](./example)\n\n## Requirements\n\n### React 16 and higher\n","readmeFilename":"README.md"}