react-useportal - 🌀 React hook for Portals

  •        7

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

https://codesandbox.io/s/w6jp7z4pkk

Dependencies:

use-ssr : ^1.0.13

Tags
Implementation
License
Platform

   




Related Projects

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

use-react-router - React Hook for pub-sub behavior using React Router.

  •    TypeScript

useReactRouter() returns an object that contains the history, location, and match properties that would be passed as props by the HOC. A tutorial covering the design and development of this package can be found on Medium: How to Convert withRouter to a React Hook.

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


redux-react-hook - React Hook for accessing state and dispatch from a Redux store

  •    TypeScript

React hook for accessing mapped state and dispatch from a Redux store. NOTE: React hooks require react and react-dom version 16.8.0 or higher.

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.

fetch-suspense - A React hook compatible with React 16.6's Suspense component.

  •    TypeScript

useFetch is a React hook that supports the React 16.6 Suspense component implementation. The design decisions and development process for this package are outlined in the Medium article React Suspense with the Fetch API.

react-mdl - React Components for Material Design Lite

  •    CSS

This library is now deprecated. It's higly recommended to use Material Design Components instead. Instead of using the official material.css and material.js files from the MDL project, you should use the files we provide in /extra. The reason to that is because the official Layout component is not fully compatible with React. We made a patch and we re-exported everything so people can still use it. If you're worried about the changes we made, you can take a look at the patch note or read about the issue in this ticket.

use-immer - Use immer to drive state with a React hooks

  •    TypeScript

A hook to use immer as a React hook to manipulate state. useImmer(initialState) is very similar to useState. The function returns a tuple, the first value of the tuple is the current state, the second is the updater function, which accepts an immer producer function, in which the draft can be mutated freely, until the producer ends and the changes will be made immutable and become the next state.

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

mobx-react-lite - Lightweight React bindings for MobX based on React 16.8 and Hooks

  •    TypeScript

This is a next iteration of mobx-react coming from introducing React hooks which simplifies a lot of internal workings of this package. Class based components are not supported except using <Observer> directly in class render method. If you want to transition existing projects from classes to hooks (as most of us do), you can use this package alongside the mobx-react just fine. The only conflict point is about the observer HOC. Subscribe to this issue for a proper migration guide.

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-modal - Accessible modal dialog component for React

  •    Javascript

The app element allows you to specify the portion of your app that should be hidden (via aria-hidden) to prevent assistive technologies such as screenreaders from reading content outside of the content of your modal.If you are doing server-side rendering, you should use this property.





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.