jeremybarbet / React Native Portalize
Licence: mit
The simplest way to render anything on top of the rest.
Stars: ✭ 157
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Native Portalize
Single Spa Portal Example
Example project on how to combine multiple SPA's on a single Website
Stars: ✭ 376 (+139.49%)
Mutual labels: portal
Componette Site
➿ Addons, plugins, components and extensions (@componette ❤️ @nette)
Stars: ✭ 56 (-64.33%)
Mutual labels: portal
React Relative Portal
React component for place dropdowns outside overflow: hidden; elements
Stars: ✭ 114 (-27.39%)
Mutual labels: portal
React Cool Portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: ✭ 458 (+191.72%)
Mutual labels: portal
Wedatasphere
WeDataSphere is a financial level one-stop open-source suitcase for big data platforms. Currently the source code of Scriptis and Linkis has already been released to the open-source community. WeDataSphere, Big Data Made Easy!
Stars: ✭ 372 (+136.94%)
Mutual labels: portal
Gisportal
A web-based GIS tool for visualisation and analysis of geospatial data
Stars: ✭ 48 (-69.43%)
Mutual labels: portal
Nukeviet
NukeViet CMS is multi Content Management System. NukeViet CMS is the 1st open source content management system in Vietnam. NukeViet was awarded the Vietnam Talent 2011, the Ministry of Education and Training Vietnam officially encouraged to use.
Stars: ✭ 113 (-28.03%)
Mutual labels: portal
Shaders Portal
A showcase of shader effects to replicate portals in different games.
Stars: ✭ 65 (-58.6%)
Mutual labels: portal
React Native Portal
A simplified portal implementation for ⭕️ React Native & Web ⭕️.
Stars: ✭ 112 (-28.66%)
Mutual labels: portal
Cloud Portal
Self service web portal for different Cloud platforms like Azure, AWS and VMWare vSphere.
Stars: ✭ 60 (-61.78%)
Mutual labels: portal
React Layer Stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 152 (-3.18%)
Mutual labels: portal
Vue Simple Portal
A simpler Portal implementation focussed on moving slot content to the end of the body element
Stars: ✭ 139 (-11.46%)
Mutual labels: portal
React Native Loading Spinner Overlay
💈 React Native loading spinner overlay
Stars: ✭ 1,369 (+771.97%)
Mutual labels: portal
Portalize
The simplest way to render anything on top of the rest.
This component is extracted from react-native-paper
and has been simplified for the purpose of react-native-modalize
.
Installation
yarn add react-native-portalize
Usage
import React from 'react';
import { View, Text } from 'react-native';
import { Host, Portal } from 'react-native-portalize';
export const MyApp = () => (
<Host>
<View>
<Text>Some copy here and there...</Text>
<Portal>
<Text>A portal on top of the rest</Text>
</Portal>
</View>
</Host>
);
Example with react-native-modalize
and react-navigation
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Modalize } from 'react-native-modalize';
import { Host, Portal } from 'react-native-portalize';
const Tab = createBottomTabNavigator();
const ExamplesScreen = () => {
const modalRef = useRef<Modalize>(null);
const onOpen = () => {
modalRef.current?.open();
};
return (
<>
<TouchableOpacity onPress={onOpen}>
<Text>Open the modal</Text>
</TouchableOpacity>
<Portal>
<Modalize ref={modalRef}>...your content</Modalize>
</Portal>
</>
);
};
const SettingsScreen = () => (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings screen</Text>
</View>
);
export const App = () => (
<NavigationContainer>
<Host>
<Tab.Navigator>
<Tab.Screen name="Examples" component={ExamplesScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</Host>
</NavigationContainer>
);
Props
Host
children
A React node that will be most likely wrapping your whole app.
Type | Required |
---|---|
node | Yes |
style
Optional props to define the style of the Host component.
Type | Required |
---|---|
style | No |
Portal
children
The React node you want to display on top of the rest.
Type | Required |
---|---|
node | Yes |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].