react-placeholder - A React component to easily replicate your page with nice placeholders while the content is loading

  •        200

You can pass an optional delay prop which specifies the time (in milliseconds) react-placeholder should wait before displaying the placeholder element. This is useful if you want to show a placeholder for slower connections while avoiding a brief "flash" on faster connections. Note that this delay will not affect the initial render, only subsequent "ready" state changes. Setting the firstLaunchOnly prop to true will also disable this feature.

https://github.com/buildo/react-placeholder

Dependencies:

prop-types : ^15.6.0

Tags
Implementation
License
Platform

   




Related Projects

react-shimmer - 🌠 React <img> component that simulates a shimmer effect while loading.

  •    Javascript

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

ReactScriptLoader - A library for creating React components that depend on external scripts.

  •    Javascript

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

react-native-blurhash - 🖼️ A library to show colorful blurry placeholders while your content loads.

  •    Kotlin

🖼️ Give your users the loading experience they want. BlurHash is a compact representation of a placeholder for an image. Instead of displaying boring grey little boxes while your image loads, show a blurred preview until the full image has been loaded.

vue-content-loader - SVG component to create placeholder loading, like Facebook cards loading.

  •    Javascript

SVG component to create placeholder loading, like Facebook cards loading. This is a Vue port for react-content-loader.

react-progressive-image - React component for progressive image loading

  •    Javascript

If you use the UMD build you can find the library on window.ReactProgressiveImage.react-progressive-image exports a single React component, ProgressiveImage, which takes a src and placeholder prop, as well as an optional onError function.


rn-placeholder - :dash: :dizzy: :sparkles: Display some placeholder stuff before rendering your text or media content in React Native

  •    Javascript

Display some placeholder stuff before rendering your text or media content in React Native. _Fully compatible with Expo and react-native-web.

react-video - 🎞 React component to load video from Vimeo or Youtube across any device.

  •    Javascript

A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image. If you don't know, when an <iframe> is rendered from browser, it blocks its parse because it isn't a non-blocking script. This isn't so good to your user, no?. With this react component, the <iframe> just will be loaded when the user click on play. NOTICE: You need just one thing to make the component work. Put the base component style at the <header> tag. If you don't wanna use the .css extension, you can get the .styl or .scss extension at the folder ./lib.

react-loading-skeleton - Create skeleton screens that automatically adapt to your app!

  •    Javascript

Make beautiful, animated loading skeletons that automatically adapt to your app. Install by npm/yarn with react-loading-skeleton.

content-loader - ⚪️ SVG component to create placeholder loading, like Facebook cards loading.

  •    TypeScript

Angular component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders. This is an Angular port for react-content-loader.

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

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-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-waypoint - A React component to execute a function whenever you scroll to an element.

  •    Javascript

A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the window. React Waypoint can be used to build features like lazy loading content, infinite scroll, scrollspies, or docking elements to the viewport on scroll.

react-native-mask-loader - React Native App Loader that shows an expanding image as a mask on your app

  •    Javascript

This component provides a loading screen for React Native apps that is meant to reproduce Twitter's app loading animation. There is an accompanying blog post at https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html.

react-magic - Automatically AJAXify plain HTML with the power of React. It's magic!

  •    Javascript

React-Magic is an experimental library that uses the power of Facebook's React library to inject AJAX-loading goodness into plain old HTML webpages, without having to write any custom JavaScript. You can even use CSS transitions between the pages. Simply add a single script tag (or click a bookmarklet) and "it just works".HTMLtoJSX is a component of React-Magic that converts HTML to JSX. It can be used standalone, either on the web or via Node.js.

react-ladda - React wrapper for Ladda buttons.

  •    Javascript

LaddaButton is a React component that renders a Ladda button. You can change the button's loading state and progress using the loading and progress props.

google-maps-react - Companion code to the "How to Write a Google Maps React Component" Tutorial

  •    Javascript

A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team. See the demo and accompanying blog post.

react-native-spinkit - A collection of animated loading indicators for React Native

  •    Objective-C

A collection of animated loading indicators React native port of SpinKit. Check index.ios.js in the Example folder.






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.