Last active
April 20, 2020 13:21
-
-
Save scott-coates/f4a006a0c7a7c70ecc98 to your computer and use it in GitHub Desktop.
A React.js wrapper for the nanoScroller library. https://jamesflorentino.github.io/nanoScrollerJS/.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | |
| ) | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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> | |
| ) | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Does this work? I have this: TypeError: this.scrollContainer.nanoScroller is not a function, could you help to check it?