{"id":15176866,"url":"https://github.com/nextlevelshit/gatsby-plugin-react-image-map","last_synced_at":"2026-02-27T22:08:00.348Z","repository":{"id":57244731,"uuid":"210630109","full_name":"nextlevelshit/gatsby-plugin-react-image-map","owner":"nextlevelshit","description":"This GatsbyJS plugin is creating a multi-layered react component with changing background images on mouse or touch moves","archived":false,"fork":false,"pushed_at":"2019-10-05T13:17:07.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-02T10:51:40.474Z","etag":null,"topics":["gatsbyjs","images","mousemove","plugin","react","touchmov"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextlevelshit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-24T14:59:27.000Z","updated_at":"2019-10-05T13:17:09.000Z","dependencies_parsed_at":"2022-09-01T04:31:10.324Z","dependency_job_id":null,"html_url":"https://github.com/nextlevelshit/gatsby-plugin-react-image-map","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nextlevelshit/gatsby-plugin-react-image-map","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-image-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-image-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-image-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-image-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextlevelshit","download_url":"https://codeload.github.com/nextlevelshit/gatsby-plugin-react-image-map/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-image-map/sbom","scorecard":{"id":682344,"data":{"date":"2025-08-11","repo":{"name":"github.com/nextlevelshit/gatsby-plugin-react-image-map","commit":"b0568fc084eaf5d471ad3eefc71df83a7323d7e3"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/11 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-21T23:36:05.916Z","repository_id":57244731,"created_at":"2025-08-21T23:36:05.916Z","updated_at":"2025-08-21T23:36:05.916Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"ssl_error","status_checked_at":"2026-02-27T19:37:41.463Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsbyjs","images","mousemove","plugin","react","touchmov"],"created_at":"2024-09-27T14:00:24.053Z","updated_at":"2026-02-27T22:08:00.323Z","avatar_url":"https://github.com/nextlevelshit.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003egatsby-plugin-react-image-map\u003c/h1\u003e\n  \u003csup\u003eGatsbyJS Plugin · React\u003c/sup\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\nThis GatsbyJS plugin is creating a multi-layered react component with changing background images on mouse or touch moves.\nThe images are in full width and cover the whole wrapper element.\nIt's showen one image at a time. \nWhile moving the mouse in any direction the images are beeing iterated and exchanged.\nOn touch devices only the x-axis is beeing tracked for iterating the images.\n\n\u003c!-- Open example of [`gatsby-plugin-image-map`](https://paulastoll.de) --\u003e\n\n## Dependencies\n\nTo use this plugin correctly you should have installed [`gatsby-transformer-sharp`](https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/) and an source processor for your images, which will be in most cases [`gatsby-source-filesystem`](https://www.gatsbyjs.org/packages/gatsby-source-filesystem).\n\n1. Install `gatsby-transformer-sharp` and `gatsby-source-filesystem`\n   ```shell\n   yarn add gatsby-transformer-sharp gatsby-source-filesystem\n   # or\n   npm install --save gatsby-transformer-sharp gatsby-source-filesystem\n   ```\n\n2. Configure `gatsby-config.js`\n   ```javascript\n   module.exports = {\n     plugins: [\n        {\n          resolve: `gatsby-source-filesystem`,\n          options: {\n            name: `image-map`,\n            path: `${__dirname}/src/images/image-map/`,\n          },\n        },\n       `gatsby-transformer-sharp`,\n       // ...\n     ]\n     // ...\n   }\n   ```\n\n\u003c!-- ## Learning Resources (optional)\n\nIf there are other tutorials, docs, and learning resources that are necessary or helpful to someone using this plugin, please link to those here. --\u003e\n\n## Install\n\n1. Install `gatsby-plugin-image-map`\n   ```shell\n   yarn add gatsby-plugin-react-image-map\n   # or\n   npm i --save-dev gatsby-plugin-react-image-map\n   ```\n\n2. Configure `gatsby-config.js`\n   ```javascript\n   module.exports = {\n     plugins: [\n      `gatsby-transformer-sharp`,\n      {\n        resolve: `gatsby-source-filesystem`,\n        options: {\n          name: `images`,\n          path: `${__dirname}/src/images/`,\n        },\n      },\n      `gatsby-plugin-react-image-map`,\n      // ...\n     ],\n     // ...\n   }\n   ```\n\n## Available options\n\nThese are the default options and can/should be modified.\n`nodes` is the only required property.\nAll the rest is optional.\n\n```javascript\nactiveClass: ``,          // (optional) class of an active image wrapper\nactiveStyle: {            // (optional) active styles for active image wrapper\n  opacity: 1,\n},\nimageStyle: {             // (optional) custom styles for image element\n  maxWidth: `100%`,\n  maxHeight: `100vh`,\n},\nitemClass: ``,            // (optional) class of an active image wrapper\nitemStyle: {              // (optional) custom styles for image wrapper\n  position: `absolute`,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  display: `block`,\n  opacity: 0,\n  width: `100%`,\n  height: `100%`,\n},\nnodes: [],                // list of your images\nthreshold: 100            // (optional) the bigger the threshold, the longer\n                          // the mouse movement has to be to change an image\n```\n\n## When do I use this plugin?\n\nThis plugin is perfect to have an interactive first impression of your website.\nThe images are in the background so you can easily put content in front of them.\nIt is a kind of interactice slide show.\n\n## Examples of usage\n\n```javascript\nimport React from \"react\"\nimport { useStaticQuery, graphql } from \"gatsby\"\nimport ImageMap from \"gatsby-plugin-react-image-map\" // import the image-map plugin\n\nconst ImageMapContainer = () =\u003e {\n  /**\n   * Query the images you'd like to be visible inside the image map.\n   * In this case the regular expression is looking for images inside\n   * the `image-map` folder inside your `src`\n   */\n  const data = useStaticQuery(graphql`\n    query ImageMapQuery {\n      allFile(filter: {sourceInstanceName: {eq: \"image-map\"}}) {\n        nodes {\n          childImageSharp {\n            fluid {\n              ...GatsbyImageSharpFluid_noBase64\n            }\n          }\n          relativePath\n        }\n      }\n    }\n  `)\n   \n  return (\n    \u003cImageMap nodes={data.allFile.nodes}/\u003e\n  )\n}\n\nexport default ImageMapContainer\n```\n\n## Examples\n\n- [Paula Stoll · Documentary Director](https://paulastoll.de)\n- [Guenter Krauss](https://gk.dailysh.it)\n\n\u003c!-- ## How to run tests\n\n## How to develop locally\n\n## How to contribute\n\nIf you have unanswered questions, would like help with enhancing or debugging the plugin, it is nice to include instructions for people who want to contribute to your plugin. --\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextlevelshit%2Fgatsby-plugin-react-image-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextlevelshit%2Fgatsby-plugin-react-image-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextlevelshit%2Fgatsby-plugin-react-image-map/lists"}