Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keidrun/reactstrap-scrollspy
Scrollspy library for Reactstrap to create an automatically update navigation easily and flexibly.
https://github.com/keidrun/reactstrap-scrollspy
bootstrap bootstrap4 component navbar navigation react react-component reactstrap scroll scrollspy
Last synced: about 2 months ago
JSON representation
Scrollspy library for Reactstrap to create an automatically update navigation easily and flexibly.
- Host: GitHub
- URL: https://github.com/keidrun/reactstrap-scrollspy
- Owner: keidrun
- License: mit
- Created: 2019-08-30T17:46:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-27T04:00:45.000Z (about 1 year ago)
- Last Synced: 2024-04-24T14:38:01.128Z (9 months ago)
- Topics: bootstrap, bootstrap4, component, navbar, navigation, react, react-component, reactstrap, scroll, scrollspy
- Language: JavaScript
- Homepage: https://keidrun.github.io/reactstrap-scrollspy/
- Size: 4.14 MB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reactstrap-scrollspy
[![NPM version][npm-image]][npm-url] [![npm module downloads][npm-downloads-image]][npm-downloads-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][depstat-image]][depstat-url] [![License: MIT][license-image]][license-url]
Scrollspy library for [Reactstrap](https://github.com/reactstrap/reactstrap) to create an automatically update navigation easily and flexibly.
## Demo
:fire: [Enjoy :+1:](https://keidrun.github.io/reactstrap-scrollspy/) :fire:
## Install
```bash
npm i reactstrap-scrollspy
```
Or
```bash
yarn add reactstrap-scrollspy
```
## Usage
This library provides `Scrollspy` and `ScrollspyNavLink` components.
### Scrollspy
You should wrap your components in `Scrollspy`. This has mainly two props, which are `names` and `homeIndex`. `names` is used to identify each component wrapped by this, so you should give unique names' list that arranged in order. Then, `homeIndex` is an index number to identify home component such as `Header`.
#### Props
```javascript
type Props = {
names: Array,
homeIndex?: number,
topOffset?: string | number,
bottomOffset?: string | number,
delayMs?: number,
children: ChildrenArray,
}
```
#### Default Props
```javascript
Scrollspy.defaultProps = {
homeIndex: 0,
topOffset: '50%',
bottomOffset: '40%',
delayMs: 50,
}
```
#### Example
```javascript
// @flow
import React from 'react'
import { Scrollspy } from 'reactstrap-scrollspy'
...
function App() {
return (
<>
>
)
}
export default App
```
### ScrollspyNavLink
You should wrap `NavLink` provided by `reactstrap` in `ScrollspyNavLink`. This has an one prop, which is `name`. `name` is used to identify a `NavLink` and notify `Scrollspy` of it automatically.
#### Props
```javascript
type Props = {
name: string,
children: Element,
}
```
#### Example
```javascript
// @flow
import React, { useState } from 'react'
import { Collapse, Navbar as ReactstrapNavbar, NavbarToggler, Nav, NavItem, NavLink } from 'reactstrap'
import { ScrollspyNavLink } from 'reactstrap-scrollspy'
function Navbar() {
...
return (
...
Home
Section1
Section2
Section3
...
)
}
export default Navbar
```
## Peer dependencies
- [React](https://github.com/facebook/react)
- ReactDOM
- [Reactstrap](https://github.com/reactstrap/reactstrap)
[npm-url]: https://npmjs.org/package/reactstrap-scrollspy
[npm-image]: https://badge.fury.io/js/reactstrap-scrollspy.svg
[npm-downloads-url]: https://npmjs.org/package/reactstrap-scrollspy
[npm-downloads-image]: https://img.shields.io/npm/dt/reactstrap-scrollspy.svg
[travis-url]: https://travis-ci.org/keidrun/reactstrap-scrollspy
[travis-image]: https://secure.travis-ci.org/keidrun/reactstrap-scrollspy.svg?branch=master
[depstat-url]: https://david-dm.org/keidrun/reactstrap-scrollspy
[depstat-image]: https://david-dm.org/keidrun/reactstrap-scrollspy.svg
[license-url]: https://opensource.org/licenses/MIT
[license-image]: https://img.shields.io/badge/License-MIT-yellow.svg