npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-plugin-js-fallback

v1.0.1

Published

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

Downloads

136

Readme

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!