Portal

v.2.0.0

Installation

yarn

yarn add @mercell/portal-react

pnpm

pnpm add @mercell/portal-react

npm

npm install --save @mercell/portal-react

The Portal has necessary peerDependencies, please make sure that you have them in your project

"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Portal component is as simple as importing it like this.

import { Portal } from '@mercell/portal-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const PortalExample = () => { return ( <> <p>Scroll till the end, so you can find this button below the footer :) </p> <Portal // parent={parent} > <Button scheme="primary" onClick={()=>alert('I overruled the result content!')} > Click me! </Button> </Portal> </> ) } render (<PortalExample/>)

// You can play with code, with HTML tags and text as much as you want!
const PortalExample = () => {
    return (
        <>
            <p>Scroll till the end, so you can find this button below the footer :) </p>
            <Portal
              // parent={parent}
            >
                <Button
                    scheme="primary"
                    onClick={()=>alert('I overruled the result content!')}
                >
                  Click me!
                </Button>
            </Portal>
        </>
    )
}
render (<PortalExample/>)

Result

Types, definitions, etc.

Types

PortalProps

interface PortalProps {
  parent?: HTMLElement;
} & JSX.IntrinsicElements['div']

Name	Type	Default	Required	Description
parent	HTMLElement	document.body	no	Place where you want to mount the portal

Changelog

Change Log - @mercell/portal-react

This log was last generated on Fri, 11 Nov 2022 09:18:57 GMT and should not be manually modified.

2.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

1.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

0.0.3

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

0.0.2

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• Reusable portal component, new approach

Figma

No figma example for this component.