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-portalTags | react portal modal loading-bar react-component lightbox react-portal transportation |
Implementation | Javascript |
License | MIT |
Platform | OS-Independent |
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-hooks react react-portal portal loading-bar modal lightbox notification dialog dropdown tooltip hook use react-hook react-component react-useportal react-use-portal transportation react-portal-hookThis 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 gateway portal modal dialogA simple, responsive lightbox component for displaying an array of images. Then open localhost:8000 in a browser.
react modal-dialogs responsive carousel lightbox-component react-component react-images react-lightbox react-carousel react-gallery lightbox gallerynavigator 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-native react-component react-native-component react mobile ios android ui lightbox gallery imageA React component that provides Loading Bar (aka Progress Bar) for long running tasks. See Demo or its source code.
middleware redux react promise-middleware loading-bar progress-bar progress-simulation loading progress react-componentRender 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 tunnels react-tunnels inverse-rendering components breadcrumbs portalsSlot & 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.
react framework extensibilityThe 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.
shoutem-ui react-native react-native-styleNote: 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 react-component react-native-component react mobile ios ui image progress bar progressbar spinner activityindicator loading indicatorAn animated progress bar component for React Native
react native react-native progress bar load loadingAn 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-native react modal android ios backdrop animation animated native simpleA react-native dropdown/picker/selector component for both Android & iOS. You can find them in the example.
react react-native react-native-component modal dropdown picker select selector option react-component ios androidA 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.
react react-image react-shimmer loading placeholder async react-component reactjs loader loading-indicator shimmer activity-indicator spinnerShoutem 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.
shoutem-ui react-native ios android native-components shoutemThis 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.
chart timeseries react pond d3 chartsA 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 dropdown popover select picker modal ios android react-componentImport library any where inside your code before AppRegistry.registerComponent is called. Invoked by React element way.
react-component react-native ios android modal popoverA react native component, easy, fully customizable, implementing the 'swipe down to close' feature. Check index.js in the Example folder.
react-component react-native ios android modal box modalbox window swipeReactScriptLoader 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.
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.