@steviecs/react-fallback

react-fallback

A POC React component library for rendering skeleton states that automatically adapt to the shape of your UI layout while data is being fetched.

Demo

Try it live by reloading the sandbox browser: https://codesandbox.io/s/react-fallback-demo-b36dft?file=/src/App.tsx

Installation

$ npm i @steviecs/react-fallback

Motivation

Because

return (
  <Fallback isLoading={data}>
    <div>
      <h1>{props.heading}</h1>
      <h2>{props.subheading}</h2>
      <p>S{props.body}</p>
    </div>
  </Fallback>
);

dunks on

  return (
    <>
      {isLoading ? (
        <div>
          <h1><Skeleton {...styles}/></h1>
          <h2><Skeleton {...styles}/></h2>
          <p><Skeleton {...styles}/></p>
        </div>
      ) : (
        <div>
          <h1>{props.heading}</h1>
          <h2>{props.subheading}</h2>
          <p>S{props.body}</p>
        </div>
      )}
    </>
  );

Props Reference

Fallback only

Prop	Description	Default
isLoading: boolean	A flag to determine if component-dependent data is being fetched	false
fallbackOnStaticContent?: boolean	A flag to determine if static content should be skeleton-ized	false

Implementation

At this time, react-fallback works by:

• Consuming your JSX as a children inside of a <Fallback/> wrapper
• Cloning the component tree
• Iterating through child elements
• Replacing children with a skeleton element that inherits all original style properties (except for the explicitly enforced background-color & animation)