https://github.com/nextlevelshit/gatsby-plugin-react-scroll-cards
Ggenerate a full-height scroll menu with abstracts of each card. Cards can be clicked and opened in a separate modal.
https://github.com/nextlevelshit/gatsby-plugin-react-scroll-cards
Last synced: 10 months ago
JSON representation
Ggenerate a full-height scroll menu with abstracts of each card. Cards can be clicked and opened in a separate modal.
- Host: GitHub
- URL: https://github.com/nextlevelshit/gatsby-plugin-react-scroll-cards
- Owner: nextlevelshit
- Created: 2019-10-05T13:15:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-25T17:15:11.000Z (about 5 years ago)
- Last Synced: 2025-03-14T03:29:29.823Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 45.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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`](https://www.gatsbyjs.org/packages/gatsby-plugin-sass/), `tailwindcss`, `lodash` and `react-scrollspy`.
1. Install `gatsby-plugin-sass`, `tailwindcss`, `lodash` and `react-scrollspy`
```shell
yarn add gatsby-plugin-sass tailwindcss lodash react-scrollspy
# or
npm install --save gatsby-plugin-sass tailwindcss lodash react-scrollspy
```
1. Configure `gatsby-config.js`
```javascript
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`
```shell
yarn add gatsby-plugin-react-scroll-cards
# or
npm i --save-dev gatsby-plugin-react-scroll-cards
```
2. Configure `gatsby-config.js`
```javascript
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.
```javascript
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
...