Skip to content

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

License

Notifications You must be signed in to change notification settings

steviecs/react-fallback

Repository files navigation

Logo

react-fallback

Node.js CI Npm package version Npm package monthly downloads Maintenance GitHub license

A POC React component library for rendering adaptive skeleton states that adjust 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

Example

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)

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published