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.