https://github.com/leops/react-jumpgate

Renderer-Agnostic portals for React
https://github.com/leops/react-jumpgate

placeholder portal react react-native

Last synced: 7 months ago
JSON representation

Renderer-Agnostic portals for React

• Host: GitHub
• URL: https://github.com/leops/react-jumpgate
• Owner: leops
• Created: 2018-10-09T19:22:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T02:00:21.000Z (over 3 years ago)
• Last Synced: 2025-02-06T07:35:13.947Z (over 1 year ago)
• Topics: placeholder, portal, react, react-native
• Language: TypeScript
• Size: 223 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-jumpgate

A generic implementation of portals for React, for platforms where ReactDOM is not available

(eg. this could be used in a React Native application to add buttons to the toolbar from any component in the tree)

```js

import createJumpgate from 'react-jumpgate';

// A jumpgate is made of 3 components: an anchor, a consumer and a provider

const { Anchor, Consumer, Provider } = createJumpgate();

const App = () => (

    


        {/* Place the anchor near the root of your component tree */}

        

            


                {/* The consumer acts as a placeholder for the component you want to teleport */}

                

            

            


                {/* The provider will send its children through the jumpgate to the consumer */}

                

                    
Title

                

            

        

    

);


/*  will render as

    


        


            
Title

        

        


    

*/

```