{"_id":"@decantyme/gatsby-plugin-modal-routing","name":"@decantyme/gatsby-plugin-modal-routing","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@decantyme/gatsby-plugin-modal-routing","version":"2.0.0","description":"Gatsby plugin to enable routing of modal pages","main":"index.js","scripts":{"prepare":"cross-env NODE_ENV=production npm run build","build":"babel src --out-dir ./dist --ignore **/__tests__","watch":"babel -w src --out-dir ./dist --ignore **/__tests__","format:checkonly":"prettier . -c","format":"prettier . -w","lint":"eslint .","lint:fix":"eslint . --fix","stylecheck":"yarn format:checkonly && yarn lint","stylefix":"yarn format && yarn lint:fix"},"keywords":["gatsby","gatsby-plugin","modal","routing"],"author":{"name":"Lenny Sirivong","email":"lenny@lenny-s.com","url":"https://lenny-s.com"},"license":"MIT","homepage":"https://github.com/lsirivong/gatsby-plugin-modal-routing","bugs":{"url":"https://github.com/lsirivong/gatsby-plugin-modal-routing/issues"},"repository":{"url":"git+https://github.com/lsirivong/gatsby-plugin-modal-routing.git","type":"git"},"dependencies":{"@babel/runtime":"^7.17.9","lodash":"^4.17.21","react":"^17.0.1","react-dom":"^17.0.1","react-modal":"^3.8.1"},"devDependencies":{"@babel/cli":"^7.17.6","@babel/core":"^7.17.9","@babel/eslint-parser":"^7.17.0","babel-plugin-lodash":"^3.3.4","babel-preset-gatsby":"^2.11.1","babel-preset-gatsby-package":"^2.11.0","cross-env":"^5.0.5","semantic-release":"^19.0.2"},"gitHead":"0f2021d082eb98c43208112dd378a2b5a1272c04","_id":"@decantyme/gatsby-plugin-modal-routing@2.0.0","_nodeVersion":"17.8.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-CEFZiqAEQXQoqkbGWQY81yI7nstrTO+A/+REoh9a9r73DLKDA9jE0DjKrFgp4CSHzReTWEyz7YLGhVw2vnG44A==","shasum":"05f834bd8effff82479300a04a8518a11cc9ae31","tarball":"https://registry.npmjs.org/@decantyme/gatsby-plugin-modal-routing/-/gatsby-plugin-modal-routing-2.0.0.tgz","fileCount":9,"unpackedSize":14353,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1RNFM5hOGjabvdboohq/jVE47SBEpcb+uxie5KsqovAiABOvo4Vd5vr3DzVu/qyjQd4tPwwnJF2VC8ZVDaRhq3FA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUPMyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryOg/+PSF5/xtQqyQ+dNBhaGnji7hjlqURhNjFmxyvsXLcnyVckl7j\r\niNlc3eLTcC02J24hBioU4SPrWShnWjWr/BlI8kEQ8k+TtOAEaqWM7bFvLtbZ\r\n5Ivvffbc8ElS72gcAgk9qcGVLtqDmJyeCQkXCxx2+LGlMjAizGL+Z3xPF+nU\r\nv32D8NN7rPvY9q9vpXwzFfT6f9oRMMDu5vKsZlGLtmSQ7KNcPOBun9Z44CF/\r\nfPuQoWzcuB4YirT9v4Kl68Qa+kkgWZLk+SzK0/Me3p8OywG8YICs+OASkOM1\r\n/2W29de208SEOiXoZWVt5lAkmfom3W/k/I3jQoX4DKsTdm/Actgl42Xmr2ec\r\nrG/DSMblnZgImbTlEZsliy9TtxHYkKWvofltr7NNLYRyxBf5FHTI5wKeHTfg\r\np0VrqfgCCM2ccfDPNgyvwaThYn05xKWwk3Y2lEP2UnxSQL1JnbmT7TZmVEVD\r\n+LWZ+T01pVB6/KjYof8yRCoA1KdU+GpziSH5BqPqO0qUyVGTwgFPT+u/COS1\r\nwueiIBO4y+Vbek3qFpC9ZI+E+17HCZXiAgE5ikyF2TY6rB7ZC5RGreA0aWrH\r\n8i/ZZ5wUbXnmNwPQFjybXnkIGVfxOxH4j44OqTONMJ2ptQ9/RNXykxiK/C0S\r\n98fVYdKud4IpUTd8gUdX/637po6bxvMYr34=\r\n=VeCN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"decantyme","email":"ague.danryparenspatriae@gmail.com"},"directories":{},"maintainers":[{"name":"decantyme","email":"ague.danryparenspatriae@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-plugin-modal-routing_2.0.0_1649472306102_0.9523829108209103"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-09T02:45:06.013Z","2.0.0":"2022-04-09T02:45:06.316Z","modified":"2022-04-09T02:45:06.467Z"},"maintainers":[{"name":"decantyme","email":"ague.danryparenspatriae@gmail.com"}],"description":"Gatsby plugin to enable routing of modal pages","homepage":"https://github.com/lsirivong/gatsby-plugin-modal-routing","keywords":["gatsby","gatsby-plugin","modal","routing"],"repository":{"url":"git+https://github.com/lsirivong/gatsby-plugin-modal-routing.git","type":"git"},"author":{"name":"Lenny Sirivong","email":"lenny@lenny-s.com","url":"https://lenny-s.com"},"bugs":{"url":"https://github.com/lsirivong/gatsby-plugin-modal-routing/issues"},"license":"MIT","readme":"# gatsby-plugin-modal-routing\r\n\r\nAdds support for viewing gatsby pages within modals at their gatsby defined routes.\r\n\r\n## Examples\r\n\r\n- https://gatsby-starter-with-gatsby-plugin-modal-routing.netlify.com/\r\n- https://gatsbygram-with-gatsby-plugin-modal-routing.netlify.com/\r\n\r\n## Install\r\n\r\n```\r\nnpm install --save gatsby-plugin-modal-routing\r\n```\r\n\r\n## Motivation\r\n\r\nThe problem: how to handle modals (stateful routes) with gatsby's page based routing?\r\n\r\nWe want a modal to open within the context of whatever page it was linked to, change\r\nthe browser's URL, and render server-side allowing permalink navigation.\r\n\r\nCurrent Gatsby V2 examples which use `PageRenderer` flicker when re-rendering content\r\nunderneath the modal. This plugin aims to handle modal routing edge cases and provide\r\na consistent rendering experience with a flexible API.\r\n\r\n## How to use\r\n\r\nAdd the plugin to your `gatsby-config.js`:\r\n\r\n```js\r\n// gatsby-config.js\r\n\r\nmodule.exports = {\r\n  plugins: [\r\n    `gatsby-plugin-modal-routing`\r\n  ]\r\n];\r\n```\r\n\r\n### Plugin Options\r\n\r\n```js\r\nmodule.exports = {\r\n  plugins: [\r\n    {\r\n      resolve: `gatsby-plugin-modal-routing`,\r\n      options: {\r\n        // A selector to set react-modal's app root to, default is `#___gatsby`\r\n        // See http://reactcommunity.org/react-modal/accessibility/#app-element\r\n        appElement: '#___gatsby',\r\n\r\n        // Object of props that will be passed to the react-modal container\r\n        // See http://reactcommunity.org/react-modal/#usage\r\n        modalProps: { },\r\n      }\r\n    }\r\n  ]\r\n];\r\n```\r\n\r\n### Rendering page content in modals\r\n\r\nAny gatsby page may be rendered in a modal if it is routed to appropriately (see next\r\nsection below for creating a modal link).\r\n\r\nThe `ModalRoutingContext` React.Context component can be used to conditionally render\r\ncontent if the page is rendered in a modal.\r\n\r\nThe Context consumer is passes an object with `modal` and `closeTo` properties to it's\r\nchild render function\r\n\r\n- `modal` (`boolean`) - indicates if the page content will be rendered in a modal. Use\r\nthis to conditionally render modal content like a close button.\r\n- `closeTo` (`string`) - if the page content is rendering in a modal, denotes the\r\npathname of the page where the modal was opened, otherwise `null`.\r\n\r\nExample:\r\n\r\n```js\r\n// pages/modal-example.js\r\n\r\nimport React from 'react'\r\nimport { Link } from 'gatsby'\r\nimport { ModalRoutingContext } from 'gatsby-plugin-modal-routing'\r\n\r\nconst ModalExamplePage = () => (\r\n  <ModalRoutingContext.Consumer>\r\n    {({ modal, closeTo }) => (\r\n      <div>\r\n        {modal ? (\r\n          <Link to={closeTo}>\r\n            Close\r\n          </Link>\r\n        ) : (\r\n          <header>\r\n            <h1>\r\n              Website Title\r\n            </h1>\r\n          </header>\r\n        )}\r\n\r\n        <h2>Modal Page</h2>\r\n\r\n        <Link to=\"/\">Go back to the homepage</Link>\r\n      </div>\r\n    )}\r\n  </ModalRoutingContext.Consumer>\r\n)\r\n\r\nexport default ModalExamplePage\r\n```\r\n\r\n### Opening a page in a modal\r\n\r\nPages can be opened in a modal context by passing the `{ modal: true }` flag to Link state.\r\n\r\nExample:\r\n\r\n```\r\n// src/components/some-component.js\r\n\r\nimport { Link } from 'gatsby'\r\n\r\n...\r\n\r\n<Link\r\n  to=\"/login/\"\r\n  state={{\r\n    modal: true\r\n  }}\r\n>\r\n  Login\r\n</Link>\r\n```\r\n\r\n`gatsby-plugin-modal-routing` also provides a `Link` component as a convenience to encapsulate\r\nthis flag for you.\r\n\r\nThis is equivalent to the example above:\r\n\r\n```\r\n// src/components/some-component.js\r\n\r\nimport { Link } from 'gatsby-plugin-modal-routing'\r\n\r\n...\r\n\r\n<Link\r\n  to=\"/login/\"\r\n  asModal\r\n>\r\n  Login\r\n</Link>\r\n```\r\n\r\n## Scroll State\r\n\r\nWhen the site opens a modal, gatsby's default scroll update is prevented, so that the\r\nunderlying page remains scrolled at the same position.\r\n\r\nWhen routing to a non-modal page **from** a modal, gatsby's default scroll update is\r\nallowed, causing the page to scroll to the top. This is the case even if the non-modal\r\npage is the same as the underlying page.\r\n\r\nTo prevent this, pass the `{ noScroll: true }` flag to Link state.\r\n\r\n```\r\n// src/components/modal-content.js\r\n\r\nimport { Link } from 'gatsby'\r\n\r\n...\r\n\r\n<Link\r\n  to=\"/\"\r\n  state={{\r\n    noScroll: true\r\n  }}\r\n>\r\n  Close Modal\r\n</Link>\r\n```\r\n\r\nAs a convenience, this plugin's `Link` component will detect if the `to` pathname matches the\r\ncontent rendered under the modal and set the `noScroll` flag for you.\r\n\r\n```\r\n// src/components/modal-content.js\r\n\r\nimport { Link } from 'gatsby-plugin-modal-routing'\r\n\r\n...\r\n\r\n<Link\r\n  to=\"/\"\r\n>\r\n  Close Modal\r\n</Link>\r\n```\r\n\r\nTo prevent scrolling on the underlying page **after** navigation to a modal is complete, see [this thread](https://github.com/reactjs/react-modal/issues/191) for different strategies.\r\n","readmeFilename":"README.md"}