Community Plugin

✳️gatsby-plugin-beast-modal

A Gatsby plugin for easy modal display with gatsby-plugin-image.

✅Install

npm install @tsaristbomba/gatsby-plugin-beast-modal

You will also need gatsby-source-filesystem

npm install gatsby-source-filesystem

✅How to use

Edit gatsby-config.js:

const path = require(`path`);

module.exports = {
  plugins: [
    `gatsby-plugin-beast-modal`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
  ],
};

Example jsx:

import React from "react";
import { ModalImage } from "@tsaristbomba/gatsby-plugin-beast-modal";
import { graphql, useStaticQuery } from "gatsby";

const Index = () => {
  const query = useStaticQuery(graphql`
    query {
      allImageSharp {
        nodes {
          gatsbyImageData(layout: CONSTRAINED)
        }
      }
    }
  `).allImageSharp.nodes;

  const colorsObj = {
    background: "#dc143c",
    primary: "#333",
    secondary: "#fff",
  };

  return (
    <div style={{ width: "500px", margin: "0 auto" }}>
      <ModalImage
        image={query[0].gatsbyImageData}
        alt="ghost pepper"
        rounded="true"
        colors={colorsObj}
      />
    </div>
  );
};

export default Index;

✅Attributes

Attribute	Description	Default
rounded	Rounded Image (4px). It only accepts strings, so “true” or “false” (styled-components)	“false”
image	`gatsby-plugin-image` query object	none
colors	colors object	{ background: “#333”, primary: “#333”, secondary: “#fff” }
width	Width of the image	100%
height	Height of the image	100%

✅Utils

There is a helper hook useModalHelper if you don’t want to query the graphql yourself. The hook query’s for any string that is passed as an argument as close as possible to the file name of the actual image:

import React from "react";
import { ModalImage, useModalHelper } from "gatsby-plugin-beast-modal";

const colorsObj = {...};

return (
    <div style={{ width: "500px", margin: "0 auto" }}>
      <ModalImage
        image={useModalHelper("hero.jpg")}
        alt="ghost pepper"
        rounded="true"
        colors={colorsObj}
      />
    </div>
  );
};

export default Index;

If you pass true as the second argument, the query will have transformOptions: { grayscale: true } in gatsbyImageData options. So the image will be grayscaled.

✔️Note

The helper hook useModalHelper can’t be called inside a callback. It is against rules of hooks.