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 portal modal loading-bar react-component lightbox react-portal transportation

use-http - 🐶 React hook for making isomorphic http requests

•    TypeScript

---

The Provider allows us to set a default url, options (such as headers) and so on. This is exactly what you would pass to the normal js fetch, with a little extra.

react fetch suspense graphql fetching ssr react-hooks react-hook reacthook react-suspense rest-client isomorphic http usefetch request fetch-data react-cache react-usefetch query mutation use hook axios react-use-fetch react-fetch-hook use-fetch usefetch-hook react-hooks-fetch react-hooks-tutorial react-custom-hooks react-hooks-async use-hooks react-usefetch-hook fetch-suspense async-hook-react react-hooks-usefetch use-fetch-hook useaxios use-axios use-superagent superagent apollo usegraphql use-graphql

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 gateway portal modal dialog

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.

npm npmjs react reactjs react-router react-hooks typescript travis travisci travis-ci

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 reactjs component tooltip portal

use-query-params - React Hook for managing state in URL query parameters with easy serialization.

•    TypeScript

---

A React Hook, HOC, and Render Props solution for managing state in URL query parameters with easy serialization. Works with React Router and Reach Router out of the box. TypeScript supported.

react url hooks query reactjs querystring queryparams query-parameters react-hooks

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.

react tunnels react-tunnels inverse-rendering components breadcrumbs portals

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.

npm npmjs travis travisci travis-ci react reactjs typescript js fetch fetch-api react-suspense

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.

react react-component mdl material-design badge button card checkbox data-table fab-button icon icon-button icon-toggle radio radio-group switch textfield progress progress-bar spinner slider tooltip menu dropdown layout drawer grid tabs

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.

immer react hooks

react-native-popup-dialog - A React Native Popup Dialog, Highly Customizable, Easy Use & Support Custom Animation

•    Javascript

---

React Native Popup Dialog for iOS & Android. Another similar dialog component: react-native-dialog-component the main difference is style.

react react-animate react-native component dialog es6 popup react-dialog react-native-popup-dialog react-native-dialog popup-dialog react-component ios android

react-native-modal-dropdown - A react-native dropdown/picker/selector component for both Android & iOS

•    Javascript

---

A 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 android

react-images - 🌄 A lightbox component for displaying images

•    Javascript

---

A 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 gallery

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 dropdown popover select picker modal ios android react-component

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 inferno preact tooltip react-component component hint react-hint react-tooltip

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-native react-component react-native-component react mobile ios android ui lightbox gallery image

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 mobx react-hooks observables mobservable react-component reactjs reactive hooks observer useobserver usecomputer

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 react-component react-native-component react mobile ios ui image progress bar progressbar spinner activityindicator loading indicator

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.

react modal react-component dialog