react-smooth-scroll

Smooth Scroll into React components

Minimal class to manage Smooth Scroll into React components based on virtual-scroll, VirtualScroll.js and raf.

Features

• Smooth Scroll on any DOM Node
• Manage easing value
• ES7 Decorator

Installation

npm install -S antoninlanglade/react-smooth-scroll

Example

import SmoothScroll from 'react-smooth-scroll';

// If you want to use decorator
@SmoothScroll.SmoothScrollDecorator

// Else you can setup with more params 
export default class Page extends React.Component {
  constructor() {
    const customEase = 0.1;
  }

  // ComponentDidMount
  componentDidMount() {
    SmoothScroll.smoothScrollManager.add(this.refs.component, customEase, this.scrollUpdate);
  }

  // ComponentWillUnmount
  componentWillUnmount() {
    SmoothScroll.smoothScrollManager.remove(this.refs.component);
  }

  // ScrollUpdate with y offset 
  scrollUpdate(y) {
    console.log(y);
  }

  render() {
    return (
      <div ref="component">
        // Your scrollable content
      </div>
    )
  }
}

Usage

SmoothScroll.smoothScrollManager.add(DOMNode, ease, scrollUpdateFunction)

Add an element into SmoothScrollManager :

DOMNode required DOMNode
ease optional Float
scrollUpdateFunction optional Function

Example:

  SmoothScroll.smoothScrollManager.add(this.refs.component, 0.1, (y) => { console.log(y) });

SmoothScroll.smoothScrollManager.remove(DOMNode)

Remove an element from SmoothScrollManager :

DOMNode required DOMNode

Example:

  SmoothScroll.smoothScrollManager.remove(this.refs.component);

SmoothScroll.smoothScrollManager.reset(DOMNode, position)

Reset position of an element on y axis from SmoothScrollManager :

DOMNode required DOMNode
position optional Float

Example: ```js SmoothScroll.smoothScrollManager.reset(this.refs.component, 30.0); ```

License

MIT.