NextPortal is a lightweight and easy-to-use portal component for NextJS.
The absence of index.js in NextJS makes it cumbersome to setup a react portal. Since NextJS follows SSG and SSR, it is also important to ensure that portals are created and dealt with only on the client-side. And, if you somehow manage to configure this, there is this issue of applying transitions on the created/removed portal correctly. Keeping these problems in mind, NextPortal was created to address these issues and setup a portal on the go.
Added Type definitions for TypeScript compatibility - NextPortal(v1.1.0)
NextPortal can be installed using npm or yarn.
npm install --save nextportal
(or)
yarn add nextportal
NextPortal is a component that wraps around your element, that can be further nested. Portals are often used to display a modal, that is rendered conditionally, although NextPortal extends this feature to render a default modal or an element that could be displayed anywhere on the screen.
Below are the props accecpted by the component:
| Prop | type | Default value | Mandatory | Description |
|---|---|---|---|---|
| show | boolean | None | Yes | Renders the portal when true. |
| delay | number | 1000 | No | Duration in milliseconds after which the component unmounts, defaults to 1000ms. |
| onClick | function | None | No | Callback function to toggle visibility state of the portal. |
| easeIn | boolean | None | No | Applies ease-in transition, whilst mounting/unmounting. Default transition is "ease" if no transition type is supplied. |
| easeOut | boolean | None | No | Applies ease-out transition, whilst mounting/unmounting.Default transition is "ease" if no transition type is supplied. |
| easeInOut | boolean | None | No | Applies ease-in-out transition, whilst mounting/unmounting.Default transition is "ease" if no transition type is supplied. |
| position | boolean | None | No | Allows you to have fine-grain control over positioning your element anywhere relative to the viewport. Needs some mandatory styling rules to be added. Check use-case section for more. |
NextPortal, under the hood makes use of native DOM functions and objects that are exclusive to the browser and cannot be parsed or executed on the server. For this reason, you'd have to import this component dynamically by setting ssr:false
import dynamic from 'next/dynamic'
const NextPortal = dynamic(()=>
{
return import('nextportal/dist/NextPortal')
},
{ssr:false}
)
The package component is now ready to be used. Check out the below use-cases to help you get started.
import Head from 'next/head'
import dynamic from 'next/dynamic'
import React,{useState} from 'react'
import styles from '../styles/Home.module.css'
const NextPortal = dynamic(
() => {
return import("nextportal/dist/NextPortal");
},
{ ssr: false }
);
export default function Home() {
const [portal,showPortal] = useState(false)
const showPortalHandler = () =>{
showPortal(true)
}
const hidePortalHandler = () =>{
showPortal(false)
}
const formElemet = <div style={{display:'flex',
justifyContent:'center',alignItems:'flex-start',
flexDirection:'row',
padding:'10px',
boxShadow:'1px 2px 3px 2px #8b8b8b',
backgroundColor:'greenyellow'}}>
<div style={{display:'flex',flexDirection:'column'}}>
<h1>Title</h1>
<input type='text' placeholder='Enter name'/>
<button onClick={hidePortalHandler}>Submit</button>
</div>
</div>
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<NextPortal show={portal} delay={2000} onClick={hidePortalHandler}
easeInOut>
{formElemet}
</NextPortal>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p>Show:{portal?"true":"false"}</p>
<br/>
<br/>
<button id="button" onClick={showPortalHandler}>Open portal</button>
</main>
</div>
)
}
Above is a bare NextJS project with a button that toggles the portal when clicked. Note that the position prop has not been set, meaning a default modal would pop up with the specified transition that is absolutely positioned.
You can alternatively position the portal element in any way you'd want to. However, you'd have to add a few CSS rules to the enclosed element to get it working properly. Those are:
- position:fixed
- pointerEvents:'auto'
Passing the position prop would make the overlay spread completely over the screen, thus giving the end user the freedom to have custom sized/positioned element.
position could be best used when you want the portal to be a sidebar/navbar or a custom-sized modal positioned as per the developer's comfort.
The enclosed element should look something like this:
<div style={{
position:'fixed', // Custom positioning and sizing to look like a sidebar.
pointerEvents:'auto',
height:'100%',
width:'20%',
left:0,
display:'flex',
justifyContent:'center',
alignItems:'flex-start',
flexDirection:'row',
padding:'10px',
boxShadow:'1px 2px 3px 2px #8b8b8b',
backgroundColor:'greenyellow'}}>
.
.
.
.
</div>
Contributions are always welcome. If you've got any feature ideas or find a bug, kindly submit a PR with the code and description of the bug/feature addition and I shall review and get it fixed/added at the earliest and publish the same with an incremented version. The current version only supports NextJS projects setup with JavaScript & TypeScript. The current version has limited transition styles, addtional transition styles can also be submitted as a contribution.