gatsby-plugin-react-scroll-cards
GatsbyJS Plugin · React · TailwindCSS · lodash · React ScrollspyThis 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
.
-
Install
gatsby-plugin-sass
,tailwindcss
,lodash
andreact-scrollspy
yarn add gatsby-plugin-sass tailwindcss lodash react-scrollspy# ornpm install --save gatsby-plugin-sass tailwindcss lodash react-scrollspy -
Configure
gatsby-config.js
moduleexports =plugins:resolve: `gatsby-plugin-sass`options:postCssPlugins:// require('./tailwind.config.js'), // Optionally add your personal tailwind config// ...// ...
Install
-
Install
gatsby-plugin-react-scroll-cards
yarn add gatsby-plugin-react-scroll-cards# ornpm i --save-dev gatsby-plugin-react-scroll-cards -
Configure
gatsby-config.js
moduleexports =plugins:resolve: `gatsby-plugin-sass`options:postCssPlugins:// 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: trueindicatorClass: `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: -200wrapperClass: `nls-scroll-cards`
When do I use this plugin?
...
Examples of usage
...
Examples
...