Gatsby is a free and open-source static site generator based on React. In this tutorial, we will use the default starter kit with cosmetic modifications.
\nReactstrap provides React components based on Bootstrap 4 library. It comes with a powerful Modal component and his three supporting sub-components:
\nArmed with those, you can get a working Model almost in no time. Reactstrap documentation is full of examples, so feel free to explore its Modals part on your own.
\nOut of the box solution is pretty comprehensive, but it forces you to create many Modals. You must control them at least with one show/hide variable and with one toggle function. They are following drawbacks with this approach:
\nThe good thing about Reactstrap Modal is that it uses React Portals to render his content into a separate DOM node. So, even if you have dozens of Modals in your JSX tree, only one will be actually rendered. And gladly, it will also sit outside your main DOM tree, where usually your React/Gatsby application is mounted into.
\nThe less neat part is that this Modal gets added and removed from DOM every time you open or close it. And you cannot even control where it renders into...
\nWouldn't it be ideal if you could pre-render the Modal at the bottom of our HTML, only swapping his content? It is possible, but requires a bit of hack here and there.
\nIf you can't wait to see the code, I've created a Github repository for you. Otherwise, let's start off our tutorial.
\nSo to get this Single Modal working, we must follow a 7-step plan:
\nI assume you are comfortable with Gatsby. I also assume you tinkered around with React Context and React Hooks before.
\nIf not, there are some recommended materials to read, before you proceed.
\nIf you are ready, let's start right off the bet, by moving into the first step.
\nBy default, Gatsby renders each page under <div id="___gatsby"> DOM element.
The only way to add another div is to use the Gatsby Server Rendering APIs. We are going to use onRenderBody method.
\nOpen the gatsby-ssr.js file and put in place following piece of code
\nconst onRenderBody = ({ setPostBodyComponents }) => {\n setPostBodyComponents([<div key=\"single-modal\" id=\"single-modal\" />]);\n};\n\nexport { onRenderBody };Reactstrap Modal offers no prop that can overwrite the DOM element it will render into. Fortunately, we can extend it and tweak a few parts in there.
\nCreate a file src/components/modal.js and put following piece in there
\nimport { Modal } from 'reactstrap';\n\nclass SingleModal extends Modal {\n constructor(props) {\n super(props);\n\n this._element = document.getElementById('single-modal');\n this._element.setAttribute('tabindex', '-1');\n this._element.style.position = 'relative';\n this._element.style.zIndex = this.props.zIndex;\n }\n\n componentWillUnmount() {\n if (this.props.onExit) {\n this.props.onExit();\n }\n\n if (this._element) {\n this.manageFocusAfterClose();\n if (this.state.isOpen) {\n this.close();\n }\n }\n\n this._isMounted = false;\n }\n}\n\nexport { SingleModal };In the constructor, we grab the single-modal element and assign it to _element variable. By doing this, we opt-out from the default behavior of Reactstrap Modal. This means that Reactstrap will render his content inside our \"single-modal\" div.
\nReactstrap Modal comes with a handy unmountOnClose prop. Whenever set to false, it will keep the Modal in the DOM.
\nThe only problem is that Modal's componentWillUnmount lifecycle method ignores unmountOnClose prop completely. And that is the reason to overwrite it by remove the destroy function call.
\nI agree that going this route feels a bit like a hack. If you update Reactstrap, you must always double-check if everything works. If you have time to roll out your own Modal component, it will be definitely a better solution.
\nBy default, Gatsby Starter Kit gives us Layout component and three pages. It's fine to use Layout at every page you create, but Gatsby comes with a handy wrapPageElement Browser API for that.
\nOpen gatsby-browser.js and paste following code in there
\nimport React from 'react';\nimport Layout from './src/components/layout';\n\nconst wrapPageElement = ({ element, props }) => {\n return <Layout {...props}>{element}</Layout>;\n};\n\nexport { wrapPageElement };Having this, you can remove now the Layout dependency from src/pages/index.js, src/pages/404.js and src/pages/page-2.
\nWith this approach, even a dynamic page in Gatsby will have a wrapping Layout component. Pretty neat!
\nIn here, we are going to touch the state management part. We want to allow every Component on every Page to have access to two variables.
\nWe also want to allow to close, toggle and set the content of the modal. And for this we will need to expose some methods.
\nReact Context appears as a perfect solution here. We could use Redux or Mobx, but it doesn't matter. Feel free to experiment with it yourself.
\nLet's start off by creating a src/contexts/SingleModalContext.js file with the following content.
\nimport React, { useState, useContext } from 'react';\n\nconst SingleModalContext = React.createContext();\n\nconst useSingleModal = () => {\n const singleModalContext = useContext(SingleModalContext);\n\n if (!singleModalContext) {\n throw new Error('useSingleModal must be used inside the SingleModalProvider');\n }\n\n return singleModalContext;\n};\n\nconst SingleModalProvider = (props) => {\n const [showModal, setShowModal] = useState(false);\n const [modalContent, setModalContent] = useState(null);\n\n const toggleModal = () => {\n setShowModal(!showModal);\n };\n\n const closeModal = () => {\n setShowModal(false);\n };\n\n const setContent = (content) => {\n setModalContent(content());\n };\n\n const value = {\n show: showModal,\n toggle: toggleModal,\n close: closeModal,\n setContent,\n content: modalContent,\n };\n\n return <SingleModalContext.Provider value={value} {...props} />;\n};\n\nexport { useSingleModal, SingleModalProvider };There are a few notable parts in there. We create the context first.
\nconst SingleModalContext = React.createContext();Then, we build a Custom Hook called useSingleModal which uses the SingleModalContext.
\nconst useSingleModal = () => {\n const singleModalContext = useContext(SingleModalContext);\n // ...\n return singleModalContext;\n}Then we craft the SingleModalProvider, which will provide two variables and three functions.
\nconst value = {\n show: showModal,\n toggle: toggleModal,\n close: closeModal,\n setContent,\n content: modalContent,\n};\n\nreturn <SingleModalContext.Provider value={value} {...props} />;The most interesting function is setContent. Its argument must be a Closure, which means it can accept the JSX syntax. This will allow to use ModalBody, ModalHeader and ModalFooter inside your Modal.
\nAlso in here, Gatsby has us covered. It delivers the wrapRootElement Browser API and wrapRootElement SSR API
\nOpen gatsby-browser.js file and add the following
\nimport { SingleModalProvider } from './src/contexts/SingleModalContext';\n\nconst wrapRootElement = ({ element }) => <SingleModalProvider>{element}</SingleModalProvider>;\nexport { wrapRootElement };The exact same snippet must go inside gatsby-ssr.js, so please adjust it too.
\nAt this point, we have a DOM element to render the Modal into. We have an overwritten Reactstrap Modal so it will mount there forever. We have also set up our state management with React Context. Our application uses SingleModalProvider and each Gatsby page makes usage of Layout component.
\nThe only part missing is to create the Single Modal itself. The best place for doing it is at the bottom of the Layout component. So open the src/components/layout.js and adjust it as shown below.
\nimport { SingleModal } from './modal';\nimport { useSingleModal } from '../contexts/SingleModalContext';\n\nconst Layout = ({ children }) => {\n const { show, toggle, content } = useSingleModal();\n // ...\n return (\n <>\n <div\n style={{\n margin: '0 auto',\n maxWidth: 960,\n padding: '0px 1.0875rem 1.45rem',\n paddingTop: 0,\n }}\n >\n <main>{children}</main>\n <footer>© {new Date().getFullYear()}, TekMi</footer>\n <SingleModal isOpen={show} toggle={() => toggle()} unmountOnClose={false}>\n {content}\n </SingleModal>\n </div>\n </>\n );\n};In here, we first import our SingleModal and the useSingleModal Custom Hook.
\nAt the bottom of Layout render method, we add the SingleModal component. Important part here is the unmountOnClose prop set to false.
\nBecause our SingleModal is actually a Reactstrap Modal, it's controlled by isOpen prop and toggled with toggle prop.
\nThe content comes from React Context and is available to every Component on every Page.
\nHaving the Modal mounted inside the \"single-modal\" DOM element, let's invoke it from the Gatsby index page. Open the src/pages/index.js and adjust it as presented below.
\nimport React from 'react';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport { Button, ModalBody, ModalFooter, ModalHeader, ButtonGroup } from 'reactstrap';\nimport { useSingleModal } from '../contexts/SingleModalContext';\n\nconst IndexPage = () => {\n const { toggle, close, setContent } = useSingleModal();\n\n const toggleModalWithContent = (cont) => {\n setContent(cont);\n toggle();\n };\n\n return (\n <>\n <ButtonGroup>\n <Button color=\"info\" onClick={() => toggleModalWithContent(() => 'TekMi')}>\n Open Modal\n </Button>\n <Button color=\"warning\" onClick={() => toggleModalWithContent(() => 11)}>\n Open Number Modal\n </Button>\n <Button color=\"success\" onClick={() => toggleModalWithContent(() => [11, 22, 33])}>\n Open Array Modal\n </Button>\n <Button\n color=\"danger\"\n onClick={() =>\n toggleModalWithContent(() => {\n return (\n <>\n <ModalHeader>Modal title</ModalHeader>\n <ModalBody>Another Test</ModalBody>\n <ModalFooter>\n <Button color=\"primary\" onClick={() => close()}>\n Do Something\n </Button>{' '}\n <Button color=\"secondary\" onClick={() => close()}>\n Cancel\n </Button>\n </ModalFooter>\n </>\n );\n })\n }\n >\n Open JSX Modal\n </Button>\n </ButtonGroup>\n </>\n );\n};\n\nexport default IndexPage;First, we import the bootstrap styles and Reactstrap Modal Components.
\nThen we import our useSingleModal Custom Hook and make use of it inside our local function toggleModalWithContent.
\nconst { toggle, close, setContent } = useSingleModal();\n\nconst toggleModalWithContent = (cont) => {\n setContent(cont);\n toggle();\n};After this, we create several buttons that pass different content to our Single Modal. Please note that even JSX syntax is possible, making it a robust solution.
\nExercise: Feel free to click the buttons and examine DOM tree inside your Developer Tools at the same time. You will notice that each Modal content renders inside \"single-modal\" DOM element, no matter which button you clicked. Even when you close the Modal, its HTML stays untouched - the only thing that changes is its display to none.
\nLooks like we have achieved what we wanted!
\nPlease study the accompanying Gatsby with Modals repository to get a deeper understanding of this solution.
\nThis has been a lengthy tutorial. It touched several core concepts, including React Context, React Portal and React Hooks. It used a lot of Gatsby SSR and Browser APIs.
\nIt has demonstrated that it's possible to have only one DOM element and re-use it with the same Modal, swapping its content.
\nIt is an experimental implementation, so don't be too hasty to use it in your codebase. It may not work if you are in a more sophisticated situation, like Modals on top of Modals.
\nIf you see some Accessibility issues or a needless Re-renders, please let me know via Twitter.
\nMy next step is to verify how Single Modal is going to work with the Redux and Custom Redux Middleware. Soon after, I'm planning to create a custom Modal, which will make Reactstrap and hacks around it obsolete.
"}},"pageContext":{"postId":"7de24bf7-aaaa-593f-9ee1-33131e7c7c3b","slug":"how-to-create-single-modal-in-gatsby-using-reactstrap-react-portals-react-context-and-react-custom-hooks"}}}