react-portal - React component for transportation of modals, lightboxes, loading bars

  •        6

Struggling with modals, lightboxes or loading bars in React? React-portal creates a new top-level React tree and injects its children into it. That's necessary for proper styling (especially positioning). Looking for v3 documentation? Go here.

https://github.com/tajo/react-portal

Dependencies:

prop-types : ^15.5.8

Tags
Implementation
License
Platform

   




Related Projects

react-useportal - ๐ŸŒ€ React hook for Portals

  •    TypeScript

Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component (react docs). This hook is also isomorphic, meaning it works with SSR (server side rendering).

react-gateway - Render React DOM into a new context (aka "Portal")

  •    Javascript

This can be used to implement various UI components such as modals. See react-modal2. It also works in universal (isomorphic) React applications without any additional setup and in React Native applications when used correctly.

react-native-lightbox - Images etc in Full Screen Lightbox Popovers for React Native

  •    Javascript

navigator property is optional but recommended on iOS, see next section for Navigator configuration. For android support you must pass a reference to a Navigator since it does not yet have the Modal component and is not on the official todo list. See the Example project for a complete example.


react-tunnels - ๐Ÿš‡ Render React components in placeholders that are placed somewhere else in the component tree

  •    Javascript

Render React components in placeholders that are placed somewhere else in the component tree. There is a common use case in React apps where you want to define a Layout where the content of some elements is defined by children components. For example, you want to define Layout just once and reuse it for every page but it has a breadcrumb whose steps depend on children components. This tiny library allows you to define tunnels to render from an element to whatever another element in the App, even elements located on top of the tree. It's like Portal but the target is a component instead of a DOM element.

react-portal-tooltip - Awesome React tooltip

  •    Javascript

Awesome tooltips. StatefulToolTip takes the same props as ToolTip, plus a className prop that will be applied to the root element wrapping the parent (see the example).

react-slot-fill - Slot & Fill component for merging React subtrees together. Portal on steroids.

  •    TypeScript

Slot & Fill component for merging React subtrees together. Creates a Slot/Fill context. All Slot/Fill components must be descendants of Provider. You may only pass a single descendant to Provider.

theme - Style your React Native components on one place

  •    Javascript

The React Native component's style is usually defined as a static variable along with the component itself. This makes it easy to build self contained components that always look and behave in the same way. On the other hand, it complicates building themeable (or skinnable) components that could have multiple styles that can be customized without touching the component source code. @shoutem/theme is built to address that problem. With themes, you can target specific components in your app and customize them through one file, just like you would do it with CSS on the web. All the documentation is available on the Developer portal.

react-native-image-progress - Progress indicator for networked images in React Native

  •    Javascript

Note: Progress indicators has been broken out to a separate component; react-native-progress. To use them, please follow installation instructions for that package. Note: onLoad* events are bubbled up, so if you want to do some custom thing when the image is loaded for example.

react-native-modal - An enhanced, animated and customizable react-native modal

  •    Javascript

An enhanced, animated and customizable react-native modal. The aim of react-native-modal is expanding the original react-native Modal component by adding animations and styles customization options while still providing a plain-simple API.

react-shimmer - ๐ŸŒ  React <img> component that simulates a shimmer effect while loading.

  •    Javascript

A powerful, customisable, <img> component that simulates a shimmer effect while loading. (with zero dependencies!) Currently compatible with React, but RN compatibility is also on the way. Feel free to send PRs.

ui - Customizable set of components for React Native applications

  •    Javascript

Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our components are built to be both composable and customizable. Each component has a predefined style that is compatible with the rest of the Shoutem UI, which makes it possible to build complex components that look great without the need to manually define complex styles. All the documentation is available on the Developer portal.

react-timeseries-charts - Declarative and modular timeseries charting components for React

  •    Javascript

This library contains a set of modular charting components used for building flexible interactive charts. It was built for React from the ground up, specifically to visualize timeseries data and network traffic data in particular. Low level elements are constructed using d3, while higher level composability is provided by React. Charts can be stacked as rows, overlaid on top of each other, or any combination, all in a highly declarative manner. The library is used throughout the public facing ESnet Portal.

react-native-modal-picker - A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections

  •    Javascript

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections. You can either use this component as an wrapper around your existing component or use it in its default mode. In default mode a customizable button is rendered.

react-native-root-modal - A pure JavaScript solution for react native`s modal component

  •    Javascript

Import library any where inside your code before AppRegistry.registerComponent is called. Invoked by React element way.

react-native-modalbox - A <Modal/> component for react-native

  •    Javascript

A react native component, easy, fully customizable, implementing the 'swipe down to close' feature. Check index.js in the Example folder.

ReactScriptLoader - A library for creating React components that depend on external scripts.

  •    Javascript

ReactScriptLoader simplifies creating React components whose rendering depends on dynamically loaded scripts. It can be used for lazily loading heavy scripts but it's especially useful for loading components that rely on 3rd party scripts, such as Google Maps or Stripe Checkout. React apps are typically single-page apps that are rendered client-side in Javascript. When loading a site built with React, the browser typically pre-loads the javascript necessary to render the site's React components so that they can be rendered with no latency. This works well for sites that serve a relatively small amount of javascript from their own servers in a single bundle. However, in some situations pre-loading all the scripts necessary to render the site's components is impractial. For example, a site may have a Map component that relies on a dynamically loaded 3rd party library to render itself. It may be possible to delay rendering the app until the third party library is finished loading but doing so would make the site feel unnecessarily sluggish. It's a much better strategy to first render the page with a placeholder for the map and asynchronously render the map once the third party library has loaded. Deferring the loading of the external script is even more important when the map component isn't rendered right away but is only revealed after user interaction.