Neatly Packaged Modules

    @tsaristbomba/gatsby-plugin-beast-modal

    0.0.81 • Public • Published

    ✳️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.

    Install

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

    DownloadsWeekly Downloads

    7

    Version

    0.0.81

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • tsaristbomba
    • vorsakha