Skip to content

Latest commit

 

History

History
212 lines (184 loc) · 6.53 KB

README.md

File metadata and controls

212 lines (184 loc) · 6.53 KB
Raw

NextPortal

 NextJS GitHub issues 

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.

What's new

Added Type definitions for TypeScript compatibility - NextPortal(v1.1.0)

Installation

NextPortal can be installed using npm or yarn.

npm install --save nextportal

(or)

yarn add nextportal

Usage

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.

Default Portal (Modal)

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.

Positioned portal

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:

  1. position:fixed
  2. 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>

Contribution

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.