Author avatar

Gaurav Singhal

Create a Link that an App will Open in a Popup

Gaurav Singhal

  • Nov 17, 2020
  • 6 Min read
  • 18,503 Views
  • Nov 17, 2020
  • 6 Min read
  • 18,503 Views
Web Development
Client-side Frameworks
React
Front End Web Development

Introduction

To retain users of an app, you might want to show them content from an external source via hyperlinks without navigating them away from your app. In such situations, you can implement a React component that opens external links in a popup. This allows the user to stay on your app and still access external content. In this guide, you'll learn how to create a link that the application can conditionally open in a popup.

Implementation

The idea is to create a wrapper component that creates a URL object for any link passed to it and decides if it’s an external link or an internal link by checking the hostname of the link. For an internal link, it simply renders that link, and in all other cases, it renders an iframe in a popup showing that external link's source.

Setup

In an empty React project, install React-Router-Dom

1npm i react-router-dom
shell

Instead of creating a custom modal component, this example will use React-Bootstrap's modal component. You can create a custom modal component or use any other UI library you are comfortable with.

Install React Bootstrap and Bootstrap.

1npm i react-bootstrap bootstrap
shell

Create a file in the root folder called environment.js and add a constant that stores the hostname of your app.

1export const HOSTNAME="localhost";
shell

Since your app is in local development, all routes will be relative to localhost. However, when you push this app to production, you should put the domain name of your app here.

Creating the Wrapper Component

Create a wrapper component for your link called LinkWrapper that takes in the link as props and generates a complete URL object for that link. If the hostname of the URL is the same as HOSTNAME in your environment, then you need to simply render that link. If it's an external website, render a modal component from React Bootstrap with an iframe pointing to the external link. Below is the complete code for the LinkWrapper component.

1import React,{useState} from 'react';
2import { Modal, Button } from "react-bootstrap";
3import {HOSTNAME} from './environment';
4
5export default function LinkWrapper({link}) {    
6    const [show, setShow] = useState(false);
7    const handleClose = () => setShow(false);
8    const handleShow = () => setShow(true);
9
10    const url = new URL(link)
11    console.log(url)
12    if (url.hostname === HOSTNAME ) return <a target="_blank" href={link}>{link}</a>
13    else
14    return (
15      <>
16        <Button variant="primary" onClick={handleShow}>
17          Open Link
18        </Button>
19  
20        <Modal show={show} onHide={handleClose}>
21            <Modal.Title>Link Popup</Modal.Title>
22          <Modal.Body><iframe src={link} style={{width:'100%',height:'400px'}}/></Modal.Body>
23          <Modal.Footer>
24            <Button variant="secondary" onClick={handleClose}>
25              Close
26            </Button>
27          </Modal.Footer>
28        </Modal>
29      </>
30    );
31  }
jsx

You can learn how the React-Bootstrap modal is used here by following the example in the official documentation: https://react-bootstrap.netlify.app/components/modal/#modals.

Conclusion

The underlying concept for creating such a component is conditional rendering. You can use the same concept for opening registration forms in a popup or rendering external images in your app. You can use this approach in situations where you might want to show certain content to the user based on the time they have spent on your app without creating a session, allowing them to log in to access more content by opening a login form popup. You can also open external videos in a popup inside an iframe that can be used in video streaming apps to show quick teasers and trailers to your users. If you have any questions, feel free to contact me at CodeAlphabet.