https://github.com/weffe/react-placeholder-fallback

Easily manage when to show placeholders and fallback ui with React
https://github.com/weffe/react-placeholder-fallback

fallback placeholder react shell typescript

Last synced: 18 days ago
JSON representation

Easily manage when to show placeholders and fallback ui with React

• Host: GitHub
• URL: https://github.com/weffe/react-placeholder-fallback
• Owner: Weffe
• License: mit
• Created: 2019-01-31T19:14:11.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-06-02T00:38:40.000Z (over 4 years ago)
• Last Synced: 2024-10-06T08:07:22.289Z (about 2 months ago)
• Topics: fallback, placeholder, react, shell, typescript
• Language: JavaScript
• Homepage: https://react-placeholder-fallback.netlify.com/
• Size: 3.11 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Placeholder Fallback

Easily manage when to show placeholders and fallback ui

[![npm version](http://img.shields.io/npm/v/react-placeholder-fallback.svg)](https://npmjs.org/package/react-placeholder-fallback "View this project on npm") [![Greenkeeper badge](https://badges.greenkeeper.io/Weffe/react-placeholder-fallback.svg)](https://greenkeeper.io/)

## Quick Start

### Install

npm

```bash

npm install --save react-placeholder-fallback

```

yarn

```bash

yarn add react-placeholder-fallback

```

### Usage

```JSX

import * as React from 'react';

import { PlaceholderFallback, Placeholders } from 'react-placeholder-fallback';

import 'react-placeholder-fallback/dist/index.css'; // required if using prebuilt placeholders

class App extends React.Component {

    render() {

        return (

            

        )

    }

}

```

## What gap does this fill?

Typically one would use placeholders to simulate data is loading from a network request. This component lets you easily manage showing a placeholder and also showing a fallback message in case the network request fails. You also are in complete control of when to show the `PlaceholderFallback` rather then having to provide a "ready" predicate to the component like other solutions.

## TypeScript Support

This library has first class support for TypeScript. Types are automatically included and don't need to be downloaded from the `@types` repository.

## Documentation

[Visit the online docs](https://react-placeholder-fallback.netlify.com/)

## Motivation

This project is inspired from other solutions like:

    

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

2. https://github.com/danilowoz/react-content-loader

3. https://github.com/krishnaxv/app-shell-placeholder

4. https://github.com/dvtng/react-loading-skeleton

However, for my own personal needs I needed a solution that could work with very strict Content Security Policies (CSP), needed to be WCAG compliant (e.g. no use of style keyword), needed to be responsive, and could degrade nicely in Internet Explorer 11. So I stuck to using plain CSS for the styling without using fancier styling solutions like `emotion` or `styled-components` that some placeholder libraries used. Second, having used `react-placeholder` in the past I felt better about having direct control in my render method of when to render the `Placeholder` or not. So I stuck with that in mind while making this library. Lastly, I wanted a nice way to handle network request failures which other placeholder libraries don't really provide.