PortalGun

Create easy-to-use portals in React & React Native.

This is PortalGun, an easy-to-use portal library that allows you to create portals, and render elements anywhere within your DOM under the `PortalGunProvider`. Get started in minutes.

Installation · Usage · Contribute

Installation

To install @ridafkih/portalgun, simply use your favourite Node.js package manager.

yarn add @ridafkih/portalgun

npm install @ridafkih/portalgun

Usage

// ...
import { PortalGunProvider, createPortal } from "@ridafkih/portalgun";

const MyPortal = createPortal("unique-key");

const MyComponent = () => {
  const [value, setValue] = useState<boolean>(true);
  const text = value ? "Yay, value is true!" : "Unfortunately, value is false.";

  return (
    {/** Anything that goes in here will render in all corresponding `MyPortal.Out` */}
    <MyPortal.In>
      <Text>{text}</Text>
    </MyPortal.In>
  );
};

export const MyApp = () => {
  return (
    <PortalGunProvider>
      {/** This contains is defined above, and contains our `MyPortal.In` */}
      <MyComponent />
      {/** Content of `MyPortal.In` will display here. */}
      <MyPortal.Out />
    </PortalGunProvider>
  );
};

Contribute

Feel free to contribute to the repository. Pull requests and issues with feature requests are super welcome!