├── .babelrc
├── .editorconfig
├── .gitignore
├── .npmignore
├── README.md
├── demo
    ├── index.html
    ├── index.js
    └── webpack.config.js
├── package.json
└── src
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "es2015",
 4 |     "react"
 5 |   ],
 6 |   "plugins": [
 7 |     "transform-object-rest-spread",
 8 |     "transform-class-properties",
 9 |     "add-module-exports"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .babelrc
2 | src
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-isolated-scroll
 2 | 
 3 | React component for [isolated-scroll](https://github.com/markdalgleish/isolated-scroll).
 4 | 
 5 | ```bash
 6 | $ npm install --save react-isolated-scroll
 7 | ```
 8 | 
 9 | ## Usage
10 | 
11 | ```js
12 | import IsolatedScroll from 'react-isolated-scroll';
13 | 
14 | <IsolatedScroll>
15 |   {/* children... */}
16 | </IsolatedScroll>
17 | ```
18 | 
19 | ## Todo
20 | 
21 | - Add demo.
22 | - Add tests.
23 | 
24 | ## License
25 | 
26 | [MIT](https://markdalgleish.mit-license.org/)
27 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   body {
 3 |     font-family: helvetica, arial, sans-serif;
 4 |     max-width: 400px;
 5 |     margin: 0 auto;
 6 |     padding: 30px;
 7 |   }
 8 | 
 9 |   .container {
10 |     border: 1px solid #888;
11 |     max-width: 400px;
12 |     height: 200px;
13 |     overflow: auto;
14 |   }
15 | </style>
16 | 
17 | <div style="height: 9999px" id="outlet"></div>
18 | 
19 | <script src="/script.js"></script>
20 | 


--------------------------------------------------------------------------------
/demo/index.js:
--------------------------------------------------------------------------------
 1 | require('./index.html');
 2 | 
 3 | import IsolatedScroll from '../src';
 4 | 
 5 | import React from 'react';
 6 | import { render } from 'react-dom';
 7 | import times from 'lodash.times';
 8 | 
 9 | const List = () => (
10 |   <ul>
11 |     { times(80, i => <li key={i}>List item.</li>) }
12 |   </ul>
13 | );
14 | 
15 | const App = () => (
16 |   <div>
17 |     <h1>react-isolated-scroll demo</h1>
18 | 
19 |     <p>With react-isolated-scroll:</p>
20 | 
21 |     <IsolatedScroll className="container">
22 |       <List />
23 |     </IsolatedScroll>
24 | 
25 |     <p>Without react-isolated-scroll:</p>
26 | 
27 |     <div className="container">
28 |       <List />
29 |     </div>
30 |   </div>
31 | );
32 | 
33 | const outlet = document.getElementById('outlet');
34 | render(<App />, outlet);
35 | 


--------------------------------------------------------------------------------
/demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   context: __dirname,
 3 | 
 4 |   entry: './index.js',
 5 | 
 6 |   output: {
 7 |     path: 'dist',
 8 |     filename: 'script.js'
 9 |   },
10 | 
11 |   module: {
12 |     loaders: [
13 |       {
14 |         test: /\.html$/,
15 |         loader: 'file?name=[name].[ext]'
16 |       },
17 |       {
18 |         test: /\.js$/,
19 |         loader: 'babel'
20 |       }
21 |     ]
22 |   }
23 | };
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-isolated-scroll",
 3 |   "version": "0.1.0",
 4 |   "description": "React component for isolated-scroll",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "start": "webpack-dev-server --config demo/webpack.config.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1",
 9 |     "build": "rm -rf lib/ && babel -d lib/ src/",
10 |     "prepublish": "npm run build"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/markdalgleish/react-isolated-scroll.git"
15 |   },
16 |   "author": "Mark Dalgleish",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/markdalgleish/react-isolated-scroll/issues"
20 |   },
21 |   "homepage": "https://github.com/markdalgleish/react-isolated-scroll#readme",
22 |   "dependencies": {
23 |     "isolated-scroll": "^0.1.0",
24 |     "prop-types": "^15.5.8"
25 |   },
26 |   "peerDependencies": {
27 |     "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
28 |   },
29 |   "devDependencies": {
30 |     "babel-cli": "^6.11.4",
31 |     "babel-core": "^6.13.2",
32 |     "babel-loader": "^6.2.4",
33 |     "babel-plugin-add-module-exports": "^0.2.1",
34 |     "babel-plugin-transform-class-properties": "^6.11.5",
35 |     "babel-plugin-transform-object-rest-spread": "^6.8.0",
36 |     "babel-preset-es2015": "^6.13.2",
37 |     "babel-preset-react": "^6.11.1",
38 |     "babel-register": "^6.11.6",
39 |     "file-loader": "^0.9.0",
40 |     "lodash.times": "^4.3.1",
41 |     "react": "^15.3.0",
42 |     "react-dom": "^15.3.0",
43 |     "webpack": "^1.13.1",
44 |     "webpack-dev-server": "^1.14.1"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import isolatedScroll from 'isolated-scroll';
 4 | 
 5 | const unbindHandlersKey = '__unbind_handlers__';
 6 | 
 7 | export default class IsolatedScroll extends Component {
 8 | 
 9 |   static propTypes = {
10 |     children: PropTypes.oneOfType([
11 |       PropTypes.arrayOf(PropTypes.node),
12 |       PropTypes.node
13 |     ])
14 |   };
15 | 
16 |   constructor() {
17 |     super();
18 | 
19 |     this.storeComponentReference = this.storeComponentReference.bind(this);
20 |   }
21 | 
22 |   componentDidMount() {
23 |     this[unbindHandlersKey] = isolatedScroll(this.component);
24 |   }
25 | 
26 |   componentWillUnmount() {
27 |     this[unbindHandlersKey]();
28 |   }
29 | 
30 |   storeComponentReference(component) {
31 |     if (component !== null) {
32 |       this.component = component;
33 |     }
34 |   }
35 | 
36 |   render() {
37 |     const { children } = this.props;
38 | 
39 |     return (
40 |       <div ref={this.storeComponentReference} {...this.props}>
41 |         { children }
42 |       </div>
43 |     );
44 |   }
45 | 
46 | }
47 | 


--------------------------------------------------------------------------------