{"_id":"@dancotton/segue-react-router","_rev":"2-ba60ad118730594caffdb30b650a79b9","name":"@dancotton/segue-react-router","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@dancotton/segue-react-router","version":"0.0.1","module":"./index.js","main":"./index.js","type":"module","types":"./src/index.d.ts","dependencies":{},"peerDependencies":{"react":"18.2.0","@dancotton/segue":"0.0.1"},"description":"![Segue](https://user-images.githubusercontent.com/21035486/216847115-d709992f-33a9-4e8e-a5e2-e15e551c29e9.gif)","_id":"@dancotton/segue-react-router@0.0.1","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-sVimG9ZD87O5isPCEhjQfz0sSXEaNwujGjoBqFqk3B1+vcDL2kqRiqWzklwHR1HKtk8wm0Wt1tk0LbLTB4WPew==","shasum":"f56a09fcf1ed6f831c0a784e47052df3bc9de5b3","tarball":"https://registry.npmjs.org/@dancotton/segue-react-router/-/segue-react-router-0.0.1.tgz","fileCount":5,"unpackedSize":2718,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrk4eHUAk3fZZi/vBlw6I9CSkdsOnMelo88NDFrYWB4QIgYCLp39tzLn1FsazY8jUaQB9ZBWl8KBuC/hFPcZk8tDE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4CN8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps3Q/9GfCmWL8kBkDNbYmW4C/8pbBA+CbV6ykzdlfwDEUMnKCMFRZ0\r\nk2GpOtxRU5oOlrJHPPPxuLref6OOHgTz5maYEXEvSMPJA2zYwznTeOszbPCe\r\nEEzZHIiCRoQcBcp2XuOi48byrF8NexjW0Cat1MCerThjrO81R7+HmHwMdVZs\r\nYMNG6GwZJjvkhGeB1nMXca7o6aYE6A2Kb0RWej7/zd2ICjlIeifKT2CjsqpE\r\nUDMFYCTpbNm6WqiJwLnTC/hCFTAPMY0pqpJqxBWzggLk81WMwJWMn+pm2ONU\r\nKnrxWFD4oIIgah4XBGH8ndFquRSx+eRHqUogrnIjWUCYSzFA2k7zCwNAEsZA\r\nTTDX1YrtAWNnDluAjW/WqDm3l7SWHmQncCb9E5d4e7ZRNUrVbpdwOGCk6WUh\r\n357bqZJMZrRbE3E+ohSSVyQWKPl6PGf9+rfq1bpjqobEDGM0TVTj/dmY9EY5\r\noWSwWEVOJENqgEZ4uPGNmGD9/OixLBq1Fafk8rbMcMz1Wtg3hy8Poh3+YogY\r\n/YOL/u39v2QU3NClbS1YsmbSuHB9mlIlKB2Pc67wUbYOzbaYqwqgbVOAPBAR\r\n3xf2Uh5SxCsmtftY/j7KNu9VSx5x+PKTL2xAcAS7NZHkDvFL+lveY1X3Lffr\r\nHBFTJwSvDW/Fst2q4D2medPfWOpEwt+dhS4=\r\n=Mi3w\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dancotton","email":"dan@daniel-cotton.co.uk"},"directories":{},"maintainers":[{"name":"dancotton","email":"dan@daniel-cotton.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/segue-react-router_0.0.1_1675633531842_0.9022021273987777"},"_hasShrinkwrap":false},"0.0.2":{"name":"@dancotton/segue-react-router","version":"0.0.2","module":"./index.js","main":"./index.js","type":"module","types":"./src/index.d.ts","dependencies":{},"peerDependencies":{"react":"18.2.0","@dancotton/segue":"0.0.2"},"description":"![Segue](https://user-images.githubusercontent.com/21035486/216847115-d709992f-33a9-4e8e-a5e2-e15e551c29e9.gif)","_id":"@dancotton/segue-react-router@0.0.2","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-jwxdADm0sjEhEw407TRKYbySHKPz9XX68nkLCyb8oZLYK3grqNKMeTjisahcJYEqlERUnREE3no/DfQMoLxkRQ==","shasum":"271a10648a9e655a4d7541cbda140c6e6d823dca","tarball":"https://registry.npmjs.org/@dancotton/segue-react-router/-/segue-react-router-0.0.2.tgz","fileCount":6,"unpackedSize":3770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7fSM6GbhaUMcgWOJlyW8Mqmxi6Bzp7oADJl4cTsX1HgIhAIm9wgSRmzNFrNkDEEFoMH0ea7iUG5evl3CK/JaRJi/3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4CUHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrD8w//ReEMiimCr5cXVADog85zLiDOckZpmGHFWVwxDb0ZnFiNhLgB\r\ny+tIB9oGUQQRbc3Wo1qbW6/ATxjKtBXr2LZeqdd6MJqGOnOLLrBYxYx6Uzvb\r\n9hBwiU1riLDPgCCmaI9hBwjpyqQz5HZmA+JSfQWXrpZqAKiAzhCSuMt3rgq3\r\nn5j+Nt6Rv2dBV8GcxjXK6uTmOM8QK/NwdJ+DSDxwEKgDmNtsuiIC+5u69wyG\r\n3LGjB0wKoFmWG5bZ+YEKr82ztV2M44Z2/oSjBlj6CAFPUO4aBwbj4NIcNVIW\r\n30/aMdRpD1rFJyc/EK9y1Fcw5hVQCPP22RkX+FJ0kdMAjwaXH93uVsZeR9TW\r\nS3tQMF3+fdZ+hi8SHMP82ya/54c7k96TxiC1OaMYLyoQhS9Q4w025XKIOB6e\r\naTMpCW/Oc/qJ/Nkvka2HP61Tez/GfDU3GVXNXuJtYEbZO/RN5+MTHCya8ECX\r\nM/I4fXXkfyqLaOuVrFToPbEWMUAq2gx5jRIbUt6x43eIGezh1iH69hpKx2l/\r\nw0fYp4llJB412Qz5vVOZ4dM0t7g9CXZHr2y6IpLcEodr4ghXybHNRk3uMQVV\r\n2He5XkvsBGhxsDSJEqhheVLcblx9OXjohtlnHxMtDNcSK5tD6YarAZVYk+Re\r\n/luTT3yY73td2Y4k4ggYHSNZN0EqC/tHW4w=\r\n=1Z40\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dancotton","email":"dan@daniel-cotton.co.uk"},"directories":{},"maintainers":[{"name":"dancotton","email":"dan@daniel-cotton.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/segue-react-router_0.0.2_1675633927540_0.3843993107483916"},"_hasShrinkwrap":false},"0.0.3":{"name":"@dancotton/segue-react-router","version":"0.0.3","license":"MIT","module":"./index.js","main":"./index.js","type":"module","types":"./src/index.d.ts","dependencies":{},"peerDependencies":{"react":"18.2.0","@dancotton/segue":"0.0.3"},"description":"![Segue](https://user-images.githubusercontent.com/21035486/216847115-d709992f-33a9-4e8e-a5e2-e15e551c29e9.gif)","_id":"@dancotton/segue-react-router@0.0.3","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-bXK5VhEljXX3nEHKjtwzb7gbFQpKKXAxM9y6iiReGJed9o1DjOb+59sOFWx02qYTqftErQcoCvQhL3mTBmcqCA==","shasum":"15cc6595f601d850c6208ea434352d104fa4e977","tarball":"https://registry.npmjs.org/@dancotton/segue-react-router/-/segue-react-router-0.0.3.tgz","fileCount":6,"unpackedSize":3790,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLCL89Vrfew3nEaScDWnt9Id/rPFjAizsQBCKgSYrjAwIgewwQnRLILkhiJt26us0LvVmFV/qJLFUkRxsdprAji5c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4CXMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr31hAAiby6t94whFoeZ+h+Cyq406lTToTVvGiO5KTW95NHLaYyFYqS\r\npBmOrnxy8sjZgxT2V7lDulYRmnNQR+N1cQ4buVYLjg5sfzV1bvA76KZ4cBDI\r\na56BWxqkySpC6tNKmEf+muAjvihXK5/EDZNuN51bc48gzoy4jJS2D91gd3UC\r\nhNCgBzN8baLMRViGXDvHcKSOv4JaOtLj3PwlwbdH3s4ZT/9cP4FE2h9eVJay\r\nKAKbfLICTFcRO73uUyymxzSHhPfhsEaoXJsrN/nU43iPOo2M7PTt99JGT1Jf\r\nRU3QIpuvzul339I8U3hwp9DivNNevQvLysl6kOxT7/YdEDTL9rLLAX0XwE9X\r\ni7R/WpPEVZdTstn0NygRwdjfXwFdyMKAKG0XucaIQVt3QLDk90QKS83B3qpt\r\nCUWIBTfvvKI3WNI1jxBVrRf5QeF3lLOV+RiMEUR+/P0B4ld47MRTy0fj0+fD\r\n+SZWfcZBYA4aRNPO0HpvR4P5phP4CiVjG/qco+9FfHSz9rv87zeD+T8jwxiH\r\nxDhN04C8eZGA8roDcCB4ls5X1vDaEwc1y5oEtZ3VN1tIHseEIn75Zc2/q1Kb\r\n/KuskLu3rEx/2b+ursRUVncyyLQTDhXa5IiG+tAWGEHPbAQNxxN86zu+MSG+\r\nTPHjaOQroc2uxn5an8ztcDljJ3E2J6zyxZQ=\r\n=l5Ch\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dancotton","email":"dan@daniel-cotton.co.uk"},"directories":{},"maintainers":[{"name":"dancotton","email":"dan@daniel-cotton.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/segue-react-router_0.0.3_1675634124365_0.42958636843874176"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-05T21:45:31.766Z","0.0.1":"2023-02-05T21:45:32.002Z","modified":"2023-02-05T21:55:24.671Z","0.0.2":"2023-02-05T21:52:07.705Z","0.0.3":"2023-02-05T21:55:24.541Z"},"maintainers":[{"name":"dancotton","email":"dan@daniel-cotton.co.uk"}],"description":"![Segue](https://user-images.githubusercontent.com/21035486/216847115-d709992f-33a9-4e8e-a5e2-e15e551c29e9.gif)","readme":"# Segue for React Router (v6.7+)\n\n![Segue](https://user-images.githubusercontent.com/21035486/216847115-d709992f-33a9-4e8e-a5e2-e15e551c29e9.gif)\n\nSegue makes shared element transitions declarative and easy for web developers.\n\nIt's a wrapper of the amazing GSAP flip plugin.\n\n## Quickstart\n\n### With React-Router\n\nCurrently we only have bindings for the (as of writing) latest versions of React Router (v6.7.0 and above!)\n\nInstall dependencies via your package manager of choice.\n```bash\nnpm install --save @dancotton/segue-react-router @dancotton/segue\n```\n\nEnsure you're using the 'data routers' as described in the [react-router docs](https://reactrouter.com/en/main/routers/create-browser-router#createbrowserrouter)\n\nAdd SegueReactRouter to your JSX tree anywhere under the RouterProvider. For example:\n```javascript\nimport SegueReactRouter from '@dancotton/segue-react-router';\n\n<Route path=\"/\" element={<SegueReactRouter />}>\n  <Route path=\"/\" element={<Home />} />\n  <Route path=\"/item/:id\" element={<Detail />} />\n</Route>\n```\n\nFinally - label any shared elements using the 'data-flip-id' attribute - e.g. \n```javascript\n<div data-flip-id={`item-${item.id}`} />\n```\n\nThis ID needs to be consistent across any pair of shared elements!\n\nAnd you're done - wasn't that easy!\n\nThere's a full example in [our repo](https://github.com/daniel-cotton/segue/tree/live/packages/examples/react-segue-example)","readmeFilename":"README.md","license":"MIT"}