Skip to content
Gatsby plugin to fallback gracefully when JS is disabled
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md update README Jul 27, 2019
gatsby-browser.js beta commit Jul 27, 2019
gatsby-ssr.js beta commit Jul 27, 2019
index.js bugfix Jul 27, 2019
package.json 1.0.0 Jul 27, 2019

README.md

gatsby-plugin-js-fallback

version license

Gatsby plugin to fallback gracefully when JS is disabled on client side.

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-js-fallback`
    // ... other plugins
  ]
};

Then in the React components/page that you would like to provide a fallback when JavaScript is disabled on client side:

import React from 'react';
import { useIsJsEnabled } from 'gatsby-plugin-js-fallback';

const GracefulPage = () => {
  const isJsEnabled = useIsJsEnabled();

  return isJsEnabled ? <MyFancyComponentThatNeedJs /> : <SimpleComponent />;
};
  • During Gatsby prerender phase, useIsJsEnabled would returns false, thus the pre-rendered HTML will contain the fallback UI that does not rely on JavaScript.
  • On client side, if JavaScript is enabled and your Gatsby site hydrate successfully, useIsJsEnabled would returns true, then the UI that relies on JavaScript will be displayed.

API

useIsJsEnabled

A custom hooks that only returns true when your Gatsby site hydrate successfully on client side.

Motivation

Sometimes, you want to introduce some components in your Gatsby site that rely heavily on JavaScript. However, this would cause your site non-usable when JavaScript is disabled on client side.

There are two approaches to deal with this:

  1. Show a "this site works best with JavaScript" message. This is the default Gatsby behavior.
  2. Add a fallback UI that doesn't require JavaScript, probably less fancy but still display all the contents.

This plugin allows you to implement second approach.

Limitations

There may be content flash from the fallback UI to the enhanced UI at initial page/page refresh. This is because the pre-rendered HTML (that contains the fallback UI) will be displayed while the page is downloading all the js files and then detect if JS is enabled.

There is no solution to avoid this content flash at the moment. If you have any suggestion, raise an issue at let me know!

You can’t perform that action at this time.