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

swr - React Hooks library for remote data fetching

•    TypeScript

---

SWR is a React Hooks library for remote data fetching. The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

react fetch hook react-native zeit data-fetching stale-while-revalidate suspense swr vercel

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

frisbee - :dog2: Modern fetch-based alternative to axios/superagent/request

•    Javascript

---

tldr; Stripe-inspired API wrapper for WHATWG's fetch() method for making simple HTTP requests (alternative to superagent, request, axios).If you're using node-fetch, you need node-fetch@v1.5.3 to use form-data with files properly (due to https://github.com/bitinn/node-fetch/issues/102) If you experience form file upload issues, please see https://github.com/facebook/react-native/issues/7564#issuecomment-266323928.

api-wrapper superagent frisbee fetch fetch-api whatwg whatwg-fetch xhr request file-upload form-data node-fetch react-native react axios ios android api boilerplate github glue helper polyfill rest restful router stripe superagent-defaults wrapper

use-asset - 📦 A promise caching strategy for React Suspense

•    TypeScript

---

Each asset you create comes with its own cache. When you request something from it, the arguments that you pass will act as cache-keys. If you request later on using the same keys, it won't have to re-fetch but serves the result that it already knows. You can also use the useAsset hook, which is modelled after react-promise-suspense. This makes it possible to define assets on the spot instead of having to define them externally. They use a global cache, anything you request at any time is written into it.

react suspense resource asset

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

react-swipeable - React swipe event handler hook

•    TypeScript

---

Use the hook and set your swipe(d) handlers. Spread handlers onto the element you wish to track swipes on.

react hook mobile touch swipe swipeable react-hooks react-swipe react-touch react-hook

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

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-apollo - :recycle: React higher-order component for Apollo Client

•    TypeScript

---

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js when you want to server side render.React Apollo unlike many other tools in the React ecosystem requires no complex build setup to get up and running. As long as you have a GraphQL server you can get started building out your application with React immediately. React Apollo works out of the box with both create-react-app and React Native with a single install and with no extra hassle configuring Babel or other JavaScript tools.

react graphql ssr redux ecmascript es2015 jsnext relay npm

react-hooks - Collection of react hooks

•    TypeScript

---

This is a collection of frequently used react hooks to support development within baidu, contributions from community are also welcomed. This is a typical pnpm workspace based monorepo, each hook creates a package in packages folder, the folder name is dash-cased and without the use prefix.

react-hooks

react-ssr-prepass - A custom partial React SSR renderer for prefetching and suspense

•    Javascript

---

react-ssr-prepass is a partial server-side React renderer that does a prepass on a React element tree and suspends when it finds thrown promises. It also accepts a visitor function that can be used to suspend on anything. You can use it to fetch data before your SSR code calls renderToString or renderToNodeStream.

react react-dom server-side-rendering

the-platform - Web. Components. 😂

•    TypeScript

---

Note: React 16.8+ is required for Hooks. Detect and retrieve current device Motion.

react react-suspense react-hooks hooks suspense react-dom react-cache

Mantine - A fully featured React components library includes more than 120 customizable components and hooks

•    Typescript

---

Mantine is a fully featured React components library includes more than 120 customizable components and 40+ hooks to manage state and UI management. Mantine core library includes all essential components: inputs, buttons, modals, popovers, typography elements, layout management, etc.

react-components react-library react hooks typescript accessibility uikit a11y design-system

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.

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-data-fetching - 🎣 Declarative data fetching for React

•    Javascript

---

You can find the library on window.ReactDataFetching. The package gives access to <Fetch>, <FetchProvider> and requestToApi(). To have an in-depth explanation of how to use them, how they work and even more, head to this post: Introducing React Data Fetching 🎣.

react react-native api fetch component native data

react-relay-network-layer - ReactRelayNetworkLayer with middlewares and query batching for Relay Classic

•    Javascript

---

The ReactRelayNetworkLayer is a Relay Network Layer with various middlewares which can manipulate requests/responses on the fly (change auth headers, request url or perform some fallback if request fails), batch several relay request by timeout into one http request. ReactRelayNetworkLayer can be used in browser, react-native or node server for rendering. Under the hood this module uses global fetch method. So if your client is too old, please import explicitly proper polyfill to your code (eg. whatwg-fetch, node-fetch or fetch-everywhere).

relay relay-network-layer graphql-client batch-request react network-layer batch express jwt auth-token

apollo-client - :rocket: A fully-featured, production ready caching GraphQL client for every server or UI framework

•    TypeScript

---

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL. To get the most value out of apollo-client, you should use it with one of its view layer integrations.To get started with the React integration, go to our React Apollo documentation website.

graphql graphql-client typescript apollo-client apollographql

hooks - React hooks for convenient react-navigation use

•    TypeScript

---

This is the main convenience hook. It provides the regular navigation prop, as you'd get via the screen prop or by using withNavigation.