gatsby-plugin-react-scroll-cards

GatsbyJS Plugin · React · TailwindCSS · lodash · React Scrollspy



This GatsbyJS plugin is generating a full-height scroll menu with abstracts of each card. Cards can be clicked and opened in a separate modal.

Dependencies

To use this plugin correctly you should have installed gatsby-plugin-sass, tailwindcss, lodash and react-scrollspy.

  1. Install gatsby-plugin-sass, tailwindcss, lodash and react-scrollspy

    yarn add gatsby-plugin-sass tailwindcss lodash react-scrollspy
    # or
    npm install --save gatsby-plugin-sass tailwindcss lodash react-scrollspy
  2. Configure gatsby-config.js

    module.exports = {
      plugins: [
       {
         resolve: `gatsby-plugin-sass`,
         options: {
           postCssPlugins: [
             require('tailwindcss'),
             // require('./tailwind.config.js'), // Optionally add your personal tailwind config
           ]
         },
       },
        // ...
      ]
      // ...
    }

Install

  1. Install gatsby-plugin-react-scroll-cards

    yarn add gatsby-plugin-react-scroll-cards
    # or
    npm i --save-dev gatsby-plugin-react-scroll-cards
  2. Configure gatsby-config.js

    module.exports = {
      plugins: [
       {
         resolve: `gatsby-plugin-sass`,
         options: {
           postCssPlugins: [
             require('tailwindcss'),
             // require('./tailwind.config.js'), // Optionally add your personal tailwind config
           ]
         },
       },
       `gatsby-plugin-react-scroll-cards`,
       // ...
      ],
      // ...
    }

Available options

These are the default options and can/should be modified. nodes is the only required property. All the rest is optional.

cssVariables: {
  iconSize: `0.6rem`,
  bg: `255, 255, 255`
},
hasIndicator: true,
indicatorClass: `nls-scroll-cards__indicator`,
indicatorTitleClass: `nls-scroll-cards__indicator__title`,
indicatorTitleActiveClass: `nls-scroll-cards__indicator__title--active`,
itemClass: `nls-scroll-cards__item`,
itemContentClass: `nls-scroll-cards__item__content`,
indicatorSubTitleClass: `nls-scroll-cards__indicator__subtitle`,
linkTitle: `Read whole article`,
nodes: [
  {
    frontmatter: {
      title: `Nothing to see here ...`,
    },
    headings: [],
    html: `There was no content uploaded yet.`,
  }
],
scrollOffset: -200,
wrapperClass: `nls-scroll-cards`

When do I use this plugin?

Examples of usage

Examples