10 Top GatsbyJS Plugins For 2020

10 Top GatsbyJS Plugins for 2020

Recommended Gatsby plugins to use in 2020

Gatsby is a React-based free and open-source framework that allows developers to build optimized web apps following the latest web standards. It’s a static site generator like Hugo and Jekyll. However, Gatsby does better in many aspects than Hugo and Jekyll as you can see from this comparison .

You don’t need Gatsby to deliver optimized web apps. You can do it yourself. Be prepared, though, for long and endless testing and configurations. Gatsby's slogan, “fast in any way that matters” really nails it since it speed-up development and not just your app.

Gatsby is not limited to its own eco-system of plugins, starters, themes, etc. (as it is, React-based). Many React tools go hand-in-hand with Gatsby, and bring out the best of it.

For example, Gatsby developers often use Bit ( Github ) to share components between Gatsby projects and speed up development even further. Shared components can be anything from a “dumb” UI component, to a data-fetching component (using staticQuery ), and even full-on layouts.

Read more about ithere:

In this article, we will talk about 10 such great plugins that you should use in your next react application.

1. gatsby-source-filesystem

gatsby-source-filesystem is a plugin that can be used to source JSON data or any other formatted data into your application with supporting plugins. You can collect data from a URL or local file. This plugin creates File nodes whom can be transformed into various other data types such as JSON and MarkDown. You have to use transformer plugins like gatsby-transformer-json and gatsby-transformer-remark for that.

installing the plugin,

After installing the plugin, create the instance of this plugin in gatsby-config.js . This plugin will create nodes from different locations of your file system specified in the instance. For example, we’ll create an instance of pages and images folder with the following code.

Go to http://localhost:8000/___graphq and create the query as shown below:

Once you create the query and run it, you will see the following result.

You need to know about the three helper functions that this plugin exports. createFilePath function is used to create URLs from file paths on the system. createRemoteFileNode function lets you download remote files and add them to the site’s GraphQL schema. Finally, createFlieNodeFromBuffer function caches the data that is not in the local system. It creates the buffer and caches its content to a disk to create the file node that points to it.

2. gatsby-image

gatsby-image is a plugin for speedy and optimized images for Gatsby sites. This React component works seamlessly with GraphQL queries. It combines native image processing techniques of Gatsby with advanced image processing techniques to load images with optimizations. Further, It also uses Gatsby-plugin-sharp to enhance its image transformations. Here are some features of the gatsby-image plugin.

1) Optimizes the image size based on the size and resolution of each device.

2) This plugin holds the image position while it’s loading to avoid jumping around.

3) The plugin displays a blur-up image until image loading is completed.

4) Loading of the image is done using lazy load considering the bandwidth and speeds.

5) It Maintains the consistency between pages.

To start with Gatsby-images, install,

Include gatsby-plugin-sharp , and gatsby-transformer-sharp in gatsby-config.js .

This is how gatsby-image is used in a component.

See an example here: