npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gorhom/portal

v1.0.14

Published

A simplified portal implementation for ⭕️ React Native ⭕️

Downloads

1,758,181

Readme

React Native Portal

React Native Portal npm npm runs with expo

A simplified portal implementation for ⭕️ React Native ⭕️.

React Native Portal


Features

  • Multi portals handling.
  • Multi portal hosts handling.
  • Allow override functionality.
  • Compatible with React Native Web.
  • Compatible with Expo, check out the project Expo Snack.
  • Written in TypeScript.

Installation

yarn add @gorhom/portal

Usage

Simple Portal

This is the very simple usage of this library, where you will teleport your content to the PortalProvider layer of the app.

First, you will need to add PortalProvider to your root component - this usually be the App.tsx.

export const App = () => (
  <PortalProvider>
  {... your app goes here}
  </PortalProvider>
);

Last, you wrap the content that you want to teleport with Portal.

const BasicScreen = () => {
  return (
    { ... }
    <Portal>
      <Text>
        Text to be teleported to the root host
      </Text>
    </Portal>
    { ... }
  );
};

Custom Portal Host

This is when you need to teleport your content to a custom portal host PortalHost at any layer in the app.

First, you will need to add PortalProvider to your root component - this usually be the App.tsx.

export const App = () => (
  <PortalProvider>
  {... your app goes here ...}
  </PortalProvider>
);

Second, you will need to add PortalHost at any layer in your app, with a custom name.

const CustomView = () => {
  return (
    { ... }
    <PortalHost name="CustomPortalHost" />
    { ... }
  );
};

Last, you wrap the content that you want to teleport with Portal and the custom portal host name.

const BasicScreen = () => {
  return (
    { ... }
    <Portal hostName="CustomPortalHost">
      <Text>
        Text to be teleported to the CustomView component
      </Text>
    </Portal>
    { ... }
  );
};

React Native Screens integration

In order to get your teleported content on top of all native views, you will need to wrap your content with FullWindowOverlay from react-native-screens.

import { FullWindowOverlay } from 'react-native-screens';

const BasicScreen = () => {
  return (
    { ... }
    <Portal>
      <FullWindowOverlay style={StyleSheet.absoluteFill}>
        <Text>
          Text to be teleported to the CustomView component
        </Text>
      </FullWindowOverlay>
    </Portal>
    { ... }
  );
};

React Native Gesture Handler

To avoid issues when using the React Native Portal with React Native Gesture Handler, you must place the PortalProvider under the GestureHandlerRootView, otherwise it might freeze your app.

export const App = () => (
  <GestureHandlerRootView>
    <PortalProvider>
    {... your app goes here}
    </PortalProvider>
  </GestureHandlerRootView>
);

Read more about the app freezing issue.

Props

Portal Props

name

Portal's key or name to be used as an identifer.

required: NO | type: string | default: auto generated unique key

hostName

Host's key or name to teleport the portal content to.

required: NO | type: string | default: 'root'

handleOnMount

Override internal mounting functionality, this is useful if you want to trigger any action before mounting the portal content.

type handleOnMount = (mount?: () => void) => void;

required: NO | type: function | default: undefined

handleOnUnmount

Override internal un-mounting functionality, this is useful if you want to trigger any action before un-mounting the portal content.

type handleOnUnmount = (unmount?: () => void) => void;

required: NO | type: function | default: undefined

children

Portal's content.

required: NO | type: ReactNode | ReactNode[] | default: undefined

PortalHost Props

name

Host's key or name to be used as an identifier.

required: YES | type: string

Hooks

usePortal

To access internal functionalities of all portals.

/**
 * @param hostName host name or key.
 */
type usePortal = (hostName: string = 'root') => {
  /**
   * Register a new host.
   */
  registerHost: () => void;
  /**
   * Deregister a host.
   */
  deregisterHost: () => void;
  /**
   * Add portal to the host container.
   * @param name portal name or key
   * @param node portal content
   */
  addPortal: (name: string, node: ReactNode) => void;
  /**
   * Update portal content.
   * @param name portal name or key
   * @param node portal content
   */
  updatePortal: (name: string, node: ReactNode) => void;
  /**
   * Remove portal from host container.
   * @param name portal name or key
   */
  removePortal: (name: string) => void;
};

Author

Sponsor & Support

To keep this library maintained and up-to-date please consider sponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter @gorhom.

License

MIT