rrr-lazy - Lazy load react component and lazy load data.

  •        6

Lazy load component with react && react-router. rrr-lazy requires React 16.2.0 or later.

https://github.com/kouhin/rrr-lazy

Dependencies:

create-react-context : ^0.2.3
hoist-non-react-statics : ^3.2.0
prop-types : ^15.6.2
react-fast-compare : ^2.0.4

Tags
Implementation
License
Platform

   




Related Projects

react-simple-img - 🌅 React lazy load images with IntersectionObserver API and Priority Hints

  •    Javascript

Image component working similar with standard img tag and with the following props. This function is only required, when you want to customise intersection observer configuration.

yall.js - A fast, flexible, and small image lazy loader!

  •    Javascript

yall.js is a featured-packed lazy loading script for <img>, <picture>, <video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scroll, touchmove, resize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also (optionally) optimize use of browser idle time using requestIdleCallback. To optimize decoding of <img> lazy loading for simple src and srcset use cases, yall.js uses Image.decode where available to decode images asynchronously before adding them to the DOM.

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.

lozad

  •    Javascript

It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits. Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.


example-react-router-server-rendering-lazy-routes

  •    Javascript

React Router has two great features that seem like they might not work well together: server side rendering and code splitting. This minimal demo shows how to get the benefits of server rendering and partial app loading with lazy routes and webpack's code splitting.

react-router-server - Server Side Rendering library for React Router v4.

  •    Javascript

Server Side Rendering library for React Router v4. If anyone is interested in taking over this project please let me know.

react-router-native - A routing library for React Native that strives for sensible API parity with react-router 🤖

  •    Javascript

A routing library for React Native that strives for sensible API parity with react-router. React Router community decided that a reducer-based paradigm similar to that of NavigationExperimental is better suited to native navigation. Transition to a reducer-based paradigm is also being discussed for the web. On the other hand, NavigationExperimental has no intention to support a React Router-like interface and leaves the navigation state up to the developer to maintain.

isomorphic-flux-boilerplate - ES7 Isomorphic Flux/ReactJS Boilerplate

  •    Javascript

A wonderfull boilerplate for Flux/ReactJS universal applications, running on koajs. Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.

react-rocket-boilerplate - A boilerplate written in ES6 using ReactJS (along with React Router and RefluxJS), SASS, Gulp, and Browserify

  •    Javascript

A boilerplate using ReactJS (along with React Router and RefluxJS), SASS, Gulp, and Browserify that also utilizes Gulp best practices from this resource. Now that gulp dev is running, the server is up as well and serving files from the /build directory. Any changes in the /app directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address.

react-native-redux-router - React Native Router using Redux architecture

  •    Javascript

I've decided to stop supporting this component in favor to new release react-native-router-flux (https://github.com/aksonov/react-native-router-flux). The new version doesn't depend from concrete Flux/Redux implementation and allow you to build nested navigators easily. Also it allows to intercept route 'actions' from your store(s).

react-router-navigation - ⛵️ A complete navigation library for React Native and React Router

  •    Makefile

react-router-navigation is still a work in progress. That means it's extremely likely that you'll encounter issues. Always consider it. react-router-navigation provides tools to navigate between multiple screens with navigators or tab views. This library is based on react-router, react-navigation, and react-native-tab-view.

universal-router - A simple middleware-style router for isomorphic JavaScript web apps

  •    Javascript

A simple middleware-style router that can be used in both client-side (e.g. React, Vue.js) and server-side applications (e.g. Node.js/Express, Koa).Play with an example on JSFiddle, CodePen, JS Bin in your browser or try RunKit node.js playground.

jquery_lazyload - Vanilla JavaScript plugin for lazyloading images

  •    Javascript

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.

redux-router - Redux bindings for React Router – keep your router state inside your Redux store

  •    Javascript

Redux bindings for React Router. React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.

react-router-bootstrap - Integration between React Router and React-Bootstrap

  •    Javascript

Integration between React Router v4 and React Bootstrap. Please note that by default React Router will match any location that contains path specified in to prop. To make <LinkContainer> to match the location exactly, set exact prop to true or use <IndexLinkContainer> instead.

react-router-scroll - React Router scroll management

  •    Javascript

React Router scroll management. react-router-scroll is a React Router middleware that adds scroll management using scroll-behavior. By default, the middleware adds browser-style scroll behavior, but you can customize it to scroll however you want on route transitions.

react-overdrive - Super easy magic-move transitions for React apps

  •    Javascript

Super easy magic-move transitions for React apps. Wrap any element (not just images) in a <Overdrive id=""></Overdrive> component. Add the same id to create a transition between the elements.

react-native-dva-starter - a React Native starter powered by dva and react-navigation

  •    Javascript

Great thanks to @xuan45 for his cli tool dva-native-cli, check that project for more information. The builtin router of dva (not react-router v4), doesn't support React Native, we have to integrate other router components, such as Navigator, ExperimentalNavigation, react-native-router-flux and react-navigation. Since the former two will be depreciated in flavor of react-navigation, which is also be recommended by official, so I choose it to be the navigator.