https://github.com/zauberware/react-scroll-to
Scroll to ankers on your page. Scroll to Provider for React (^16.3.0) .. or better (^16.6.0).
https://github.com/zauberware/react-scroll-to
react react-component react-scroll reactjs scrollto
Last synced: 7 months ago
JSON representation
Scroll to ankers on your page. Scroll to Provider for React (^16.3.0) .. or better (^16.6.0).
- Host: GitHub
- URL: https://github.com/zauberware/react-scroll-to
- Owner: zauberware
- License: mit
- Created: 2018-11-01T15:17:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T16:42:38.000Z (over 2 years ago)
- Last Synced: 2024-11-05T18:06:39.025Z (8 months ago)
- Topics: react, react-component, react-scroll, reactjs, scrollto
- Language: JavaScript
- Size: 742 KB
- Stars: 3
- Watchers: 4
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-scroll-to
Scroll to named ankers on your page. Scroll to Provider for React (^16.3.0) .. or better (^16.6.0)..
## Installation
```
npm install @zauberware/react-scroll-to
```
### ScrollToProvider
Include the ScrollToProvider in your App by wrapping it around your App Component.
```
# src/index.js
import ScrollToProvider from '@zauberware/react-scroll-to'
# wrap scroll to Provider
```
### NEW with v 0.2.1
### ScrollToActionElement
You can use the included ScrollToAction element with a scrollTo action already attached.
```
# Renders a passed Component and adds 'active' property
```
The rendered element has the property active='active', so you can use it with styled-components
### Usage
#### addScrollRef()
Add a ref to a component where you want to scroll to:
```
const { addScrollRef } = this.context
addScrollRef('mysection', node)}>
```
#### scrollTo()
Scroll to a specified section:
```
handleClick = (target) => {
const { scrollTo } = this.context
if (scrollTo) scrollTo(target)
}
this.handleClick('mysection')}>My Section
```
#### Add Context
#### LEGACY IMPLEMENTATION BEFORE v0.2.1!
Define your contextTypes:
```
MyComponent.contextTypes = {
scrollTo: PropTypes.func.isRequired,
addScrollRef: PropTypes.func.isRequired,
}
```
Note: You only need to define the types or functions you want to use. You may only need addScrollRef on your scroll target and e.g. scrollTo within your MenuComponent.
#### IMPLEMENTATION v0.2.1!
```
import ScrollToContext from '@zauberware/react-scroll-to'
[...]
MyComponent.contextType = ScrollToContext
```