YouTube Icon

Code Playground.

How to Create a Link that an App will Open in a Popup

CFG

How to Create a Link that an App will Open in a Popup

Introduction

To hold clients of an application, you should show them content from an outer source by means of hyperlinks without exploring them from your application. In such circumstances, you can execute a React part that opens outer connections in a popup. This permits the client to remain on your application nevertheless access outer substance. In this aide, you'll figure out how to make a connection that the application can restrictively open in a popup.

Implementation

The thought is to make a covering part that makes a URL object for any connection passed to it and chooses if it's an outside interface or an interior connection by checking the hostname of the connection. For an inner connection, it just delivers that connection, and in any remaining cases, it delivers an iframe in a popup showing that outside connection's source.

Setup

In a void React project, introduce React-Router-Dom

npm i react-router-dom

Rather than making a custom modular part, this model will utilize React-Bootstrap's modular part. You can make a custom modular part or utilize some other UI library you are alright with.

Introduce React Endlessly bootstrap.

npm i react-bootstrap bootstrap

Make a record in the root organizer called environment.js and add a consistent that stores the hostname of your application.

export const HOSTNAME="localhost";

Since your application is in neighborhood advancement, all courses will be comparative with localhost. Nonetheless, when you push this application to creation, you ought to put the area name of your application here.

Making the Wrapper Component

Make a covering part for your connection called LinkWrapper that takes in the connection as props and creates a total URL object for that connection. In the event that the hostname of the URL is equivalent to HOSTNAME in your current circumstance, then, at that point, you want to deliver that interface essentially. Assuming that it's an outer site, render a modular part from React Bootstrap with an iframe highlighting the outside connect. The following is the finished code for the LinkWrapper part.

import React,{useState} from 'react';
import { Modal, Button } from "react-bootstrap";
import {HOSTNAME} from './environment';

export default function LinkWrapper({link}) {    
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const url = new URL(link)
    console.log(url)
    if (url.hostname === HOSTNAME ) return <a target="_blank" href={link}>{link}</a>
    else
    return (
      <>
        <Button variant="primary" onClick={handleShow}>
          Open Link
        </Button>
  
        <Modal show={show} onHide={handleClose}>
            <Modal.Title>Link Popup</Modal.Title>
          <Modal.Body><iframe src={link} style={{width:'100%',height:'400px'}}/></Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }

You can figure out how the React-Bootstrap modular is utilized here by following the model in the authority documentation: https://respond bootstrap.netlify.app/parts/modular/#modals.

Making a Relative Link

To test neighborhood joins, you really want to make a relative course for your application. Make a basic About part, as displayed beneath.

import React from 'react'

export const About = () => {
    return (
        <div>
            <h1>This is the about component</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae distinctio provident vero rerum expedita earum eius sint quos dolorum illum temporibus quidem in ipsa, ad beatae, repudiandae facilis aliquid?</p>
        </div>
    )
}

Inside App.js, add the course and render the LinkWrapper part made in the past segment.

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import LinkWrapper from './LinkWrapper';
import {
  BrowserRouter,
  Route,
} from "react-router-dom";
import { About } from './About';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <LinkWrapper/>
        <Route path="/about">
          <About/>
        </Route>
      </BrowserRouter>
    </div>
  );
}

export default App;

To test it out, make two connections, an outside interface and an inward connection, as displayed beneath.

 const external_link="https://reactrouter.com/web/guides/quick-start";
  const internal_link="http://localhost:3001/about"

The external_link ought to open in a popup and the internal_link ought to deliver as an ordinary connection. Pass both these connections individually to the LinkWrapper part as props.

<LinkWrapper link={external_link}/>

The LinkWrapper part delivers an Open Link button that opens the connection in a popup. Changing the connection props to internal_link just delivers the connection that opens in another tab.

Conclusion

The hidden idea for making such a part is restrictive delivering. You can involve a similar idea for opening enlistment structures in a popup or delivering outside pictures in your application. You can involve this methodology in circumstances where you should show specific substance to the client in view of the time they have spent on your application without making a meeting, permitting them to sign in to get to more happy by opening a login structure popup. You can likewise open outside recordings in a popup inside an iframe that can be utilized in video web based applications to show speedy secrets and trailers to your clients. Assuming you have any inquiries, go ahead and get in touch with me at CodeAlphabet.




CFG