A React.js wrapper for the nanoScroller library. https://jamesflorentino.github.io/nanoScrollerJS/.

demo.js

import ScrollContainer from 'nanoScroller-react.js';

export default React.createClass({

  render() {

    return (
        <nav id="sidebar-wrapper">
          <ScrollContainer id="sidebar-scroll-container">
            <ul>
              Some list of data...
            <ul/>
          </ScrollContainer>
        </nav>
    )
  }
});

nanoScroller-react.js

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import nanoScroller from 'nanoscroller';
import $ from 'jquery';

export default React.createClass({
  componentDidMount() {
    this.scrollContainer = $(ReactDOM.findDOMNode(this.refs['scroll-container']));

    this.scrollContainer.nanoScroller();
  },

  componentWillUnmount() {
    this.scrollContainer.nanoScroller({destroy: true});
  },

  render() {
    return (
      <div ref="scroll-container" {...this.props} className="nano">
        <div className="nano-content">
          {this.props.children}
        </div>
      </div>
    )
  }
});

Does this work? I have this: TypeError: this.scrollContainer.nanoScroller is not a function, could you help to check it?

The same error for me..

just import jQuery before nanoScroller 🍵

@heldr Cut that crap