Never Perfectly Managed

    @zauberware/react-scroll-to

    0.2.2 • Public • Published

    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
    <ScrollToProvider>
      <App />
    </ScrollToProvider>
    
    

    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
    <ScrollToActionElement Parent={Button} target='mysection' />
    
    

    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
    <div ref={node => addScrollRef('mysection', node)}>
    
    

    scrollTo()

    Scroll to a specified section:

    
    handleClick = (target) => {
      const { scrollTo } = this.context
      if (scrollTo) scrollTo(target)
    }
    
    <a logo onClick={() => this.handleClick('mysection')}>My Section</a>
    
    

    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
    

    Install

    npm i @zauberware/react-scroll-to

    DownloadsWeekly Downloads

    1

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    38.9 kB

    Total Files

    18

    Last publish

    Collaborators

    • marcus.franzen
    • zauberware_owner
    • philippsiegmund
    • simonfranzen
    • chrkahl
    • floriancrusius