Increasing UI with react-modal

For my last project for Flatiron School, I built an astrology blog app with Rails-API and React.

While I was planning out my app, I wanted to make sure I kept my pages minimal. When a user clicks on a sign, they see the sign show page which contains all posts made for that specific sign. The sign show page renders a posts container which contains the post card for an individual post.

The post card component has the post image, title, and a preview of the post description. I wanted the user to not be directed to another page when clicking on the post. Instead of redirecting the user to another route, I implement react-modal.

In short this npm package enables pop ups.

Installation:

$ npm install react-modal

I then added the following code to my postCard component:

** Add:

import Modal from ‘react-modal’; to whatever file you’d like to implement it

const [isOpen, setIsOpen] = useState(false);

…//

<button onClick={() => setIsOpen(true)}>Open</button>

<Modal

className=”main”

isOpen={isOpen}

onRequestClose={() => setIsOpen(false)}

style={{

overlay: {

backgroundColor: ‘black’,

},

content: {

backgroundColor: ‘white’,

},

}}

>

//…

<button onClick={() => setIsOpen(false)}>Close</button>

</Modal>

..

What this is doing is updating the state based on the onClick. When “open” is clicked the state is set to true. Otherwise if you click close it sets the state to false.

This allowed users to see a nicely displayed post card with some preview text and then if a user clicks on the open button, they will see a pop up that covers the screen with the full post information.