react-portal-frame - Rendering components inside iframes using react portal.

  •        7

Rendering components inside iframes using react portal. One unique feature of this component is that it fully supports react synthetic event bubbling & capturing. It means that you can capture events inside iframe from parent containers.



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-portal - React component for transportation of modals, lightboxes, loading bars

  •    Javascript

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.

react-frame-component - Render your React app to an iFrame

  •    Javascript

This component allows you to encapsulate your entire React application or per component in an iFrame. Go check out the demo.

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-native-webview-android - Simple React Native Android module to use Android's WebView inside your app

  •    Java

Simple React Native Android module to use Android's WebView inside your app (with experimental html file input support to handle file uploads in forms). If you need to see the install instructions for older React Native versions look here.

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-video - 🎞 React component to load video from Vimeo or Youtube across any device.

  •    Javascript

A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image. If you don't know, when an <iframe> is rendered from browser, it blocks its parse because it isn't a non-blocking script. This isn't so good to your user, no?. With this react component, the <iframe> just will be loaded when the user click on play. NOTICE: You need just one thing to make the component work. Put the base component style at the <header> tag. If you don't wanna use the .css extension, you can get the .styl or .scss extension at the folder ./lib.

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-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.

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-keyframes - Create frame-based animations in React

  •    Javascript

A React component for creating frame-based animations.The following example will render contents in Frame one at a time every 500 ms.

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.

portal-vue - A Portal Component for Vuejs, for rendering DOM outside of a component, anywhere in the document

  •    Javascript

A Portal Component for Vuejs, to render DOM outside of a component, anywhere in the document.

kalendaryo - An unopinionated React date component :atom_symbol: + :date:fns

  •    Javascript

Kalendaryo is an unopinionated React component for building calendars. It has no opinions about what your calendar component should look or function like but rather only helps you deal with those unique constraints by providing various variables your calendar component needs such as the calendar's state data and methods for getting(i.e. all the days in a month) and setting(i.e. selecting the date from a day) plus many more! See the Basic Usage section to see how you can build a basic calendar component with Kalendaryo, or see the Examples section to see more examples built with Kalendaryo. Is the state for the current date the component is in. By convention, this should only change when the calendar changes its current date, i.e. moving to and from a month or year on the calendar.

react-native-button-component - A Beautiful, Customizable React Native Button component for iOS & Android

  •    Javascript

React Native Button component for iOS & Android. CircleButton, RoundButton, RectangleButton is on top of ButtonComponent. So I recommend you should use CircleButton, RoundButton, RectangleButton, rather than directly use ButtonComponent because those button components may have preset some options.

react-hint - Tooltip component for React, Preact, Inferno

  •    Javascript

React-hint is a small tooltip component for React which is developed with simplicity and performance in mind. It also plays nicely with Preact and Inferno. You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component. In case you need to define multiple instances of ReactHint, you can customise the attribute name per instance. ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.

react-native-star-rating - A React Native component for generating and displaying interactive star ratings

  •    Javascript

A React Native component for generating and displaying interactive star ratings. Compatible with both iOS and Android. For the emptyStar, fullStar, halfStar, and iconSet props, please refer to the react-native-vector-icons package for the valid string names for the star icons. When selecting the icon string names, you must remember to remove the font family name before the first hyphen. For example, if you want to use the ion-ios-star from the Ionicon font set, you would set the fullStar prop to ios-star and the iconSet to Ionicons.