Neatly Positioned Magazines

    react-progressive-enhancement
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.9 • Public • Published

    react-progressive-enhancement

    A handy collection of HOCs for universally rendered apps 🤩

    npm Build Status

    TL;DR In universally rendered React apps, it is common to branch data-fetching and component-rendering depending on the environment (server or client), and defer rendering (a.k.a. "progressively enhance") some components. However, we must ensure the first client render matches the server render.

    This module achieves all the above by tracking whether or not the render mode is "enhanced" with an isEnhanced boolean (true only after first client render, otherwise false), which is accessed through a withIsEnhanced HOC. Additionally a progressivelyEnhanced HOC is provided which only renders the composed component for enhanced renders.

    For more info, check out this blog post.

    Features

    • No dependencies (other than React ^16.3)
    • Written in TypeScript (type-annotated)
    • Easily extensible through the exported React Context's Consumer & Provider

    Install

    yarn add react-progressive-enhancement
    # OR
    npm install react-progressive-enhancement

    Usage

    • Root.jsx:
    import { enableProgressiveEnhancementsOnMount } from 'react-progressive-enhancement';
    
    const Root = () => (
      <div>
        <PhotoRoute />
      </div>
    );
    
    export default enableProgressiveEnhancementsOnMount(Root);
    • PhotoRoute.jsx:
    import { withIsEnhanced, progressivelyEnhance } from 'react-progressive-enhancement';
    
    const ProgressivelyEnhancedRelatedContent = progressivelyEnhance(RelatedContent);
    
    class PhotoRoute extends React.Component {
      componentDidMount() {
        const hasDataFromServer = !this.props.isEnhanced;
    
        if (!hasDataFromServer) {
          this.getPhotoRouteData();
        } else {
          // do nothing, because the server already fetched the data and passed it to the client.
        }
      }
    
      render() {
        return (
          <div>
            <Photo />
            {/* This component will only render after the first client render */}
            <ProgressivelyEnhancedRelatedContent />
          </div>
        );
      }
    }
    
    export default withIsEnhanced(PhotoRoute);

    API Reference

    enableProgressiveEnhancementsOnMount

    (ComposedComponent: React.Component) => React.Component

    An HOC that wraps ComposedComponent with the Context Provider. ComposedComponent should be the root-most Component in your React app.

    withIsEnhanced

    (ComposedComponent: React.Component) => React.Component

    An HOC that provides the isEnhanced prop to ComposedComponent.

    progressivelyEnhance

    (ComposedComponent: React.Component) => React.Component

    An HOC that defers rendering ComposedComponent until after the first client render.

    Consumer, Provider

    React.Context

    The Context's Consumer and Provider are exported as well, so that you can easily extend this library as you see fit.

    Keywords

    none

    Install

    npm i react-progressive-enhancement

    DownloadsWeekly Downloads

    25

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    17.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • unsplash
    • samijaber