Scroll to ankers on your page. Scroll to Provider for React (^16.3.0) .. or better (^16.6.0).
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Scroll to named ankers on your page. Scroll to Provider for React (^16.3.0) .. or better (^16.6.0)..
npm install @zauberware/react-scroll-to
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
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
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:
My Section
">
handleClick = (target) => {
const { scrollTo } = this.context
if (scrollTo) scrollTo(target)
}
this.handleClick('mysection')}>My Section
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.
import ScrollToContext from '@zauberware/react-scroll-to'
[...]
MyComponent.contextType = ScrollToContext
Scroll to ankers on your page. Scroll to Provider for React (^16.3.0) .. or better (^16.6.0).