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

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)