build script & framework wrapper for react, angular and vue

packages/overlayscrollbars-react/build.js

@@ -0,0 +1,150 @@
+const packageName = 'overlayscrollbars-react';
+const rollupUmdName = 'OverlayScrollbarsReact';
+const filesInfo = {
+    fileName: packageName,
+    srcFolder: './src',
+    distFolder: './dist',
+    typingsFolder: './dist/types',
+    exampleFolder: './example',
+    tsconfigJsonPath: './tsconfig.json',
+    packageJsonPath: './package.json',
+    cache: [
+        '.rpt2_cache' // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
+    ]
+}
+const packagePaths = {
+    main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
+    module: `${filesInfo.distFolder}/${filesInfo.fileName}.esm.js`,
+    typings: `${filesInfo.typingsFolder}/index.d.ts`
+}
+const rollupUmdGlobals = {
+    'react': 'React',
+    'overlayscrollbars': 'OverlayScrollbars'
+};
+
+const packageJson = require(filesInfo.packageJsonPath);
+const tsconfigJson = require(filesInfo.tsconfigJsonPath);
+
+const sh = require('shelljs');
+const chalk = require('chalk');
+const gulp = require('gulp');
+const rollup = require('rollup');
+const rollupCommonJs = require('rollup-plugin-commonjs');
+const rollupTypeScript = require('rollup-plugin-typescript2');
+const rollupResolve = require('rollup-plugin-node-resolve');
+const rollupInputConfig = {
+    input: `${filesInfo.srcFolder}/index.ts`,
+    external: [...Object.keys(packageJson.devDependencies), ...Object.keys(packageJson.peerDependencies)],
+    plugins: [
+        rollupResolve(),
+        rollupCommonJs()
+    ]
+};
+const rollupOutputConfig = {
+    exports: 'named',
+    sourcemap: true
+};
+
+
+
+
+sh.echo(chalk.cyanBright('Start building:'));
+
+gulp.task('prepare', function (done) {
+    sh.echo(`> Removing ${filesInfo.distFolder}`);
+    sh.rm('-rf', filesInfo.distFolder);
+    done();
+});
+
+gulp.task('tsconfigJson', function (done) {
+    sh.echo(`> Prepare ${filesInfo.tsconfigJsonPath}`);
+    let newTsconfigJson = {
+        ...tsconfigJson,
+        compilerOptions: {
+            ...tsconfigJson.compilerOptions,
+            declarationDir: filesInfo.typingsFolder,
+            outDir: filesInfo.distFolder,
+        },
+        include: [filesInfo.srcFolder],
+        exclude: [filesInfo.distFolder, filesInfo.exampleFolder, 'node_modules']
+    };
+    sh.ShellString(JSON.stringify(newTsconfigJson, null, 4)).to(filesInfo.tsconfigJsonPath);
+    done();
+});
+
+gulp.task('packageJson', function (done) {
+    sh.echo(`> Prepare ${filesInfo.packageJsonPath}`);
+    let newPackageJson = {
+        ...packageJson,
+        ...packagePaths,
+        name: packageName,
+        files: [
+            filesInfo.srcFolder,
+            filesInfo.distFolder,
+            'README.md'
+        ]
+    };
+    sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(filesInfo.packageJsonPath);
+    done();
+});
+
+gulp.task('rollup', function (done) {
+    sh.echo('> Rollup:');
+    (async function () {
+        let rollupTsconfig = {
+            useTsconfigDeclarationDir: true,
+            tsconfig: filesInfo.tsconfigJsonPath,
+            tsconfigOverride: {
+                compilerOptions: {
+                    target: 'es5'
+                }
+            }
+        };
+
+        rollupTsconfig.tsconfigOverride.compilerOptions.target = 'es5';
+        let es5umdBundle = await rollup.rollup({
+            ...rollupInputConfig,
+            plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(rollupInputConfig.plugins)
+        });
+        await es5umdBundle.write({
+            name: rollupUmdName,
+            globals: rollupUmdGlobals,
+            file: packagePaths.main,
+            format: 'umd',
+            ...rollupOutputConfig
+        });
+        sh.echo(chalk.yellowBright(`  [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & umd]: `) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.main}`));
+
+        rollupTsconfig.tsconfigOverride.compilerOptions.target = 'es6';
+        let es6esmBundle = await rollup.rollup({
+            ...rollupInputConfig,
+            plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(rollupInputConfig.plugins)
+        });
+        await es6esmBundle.write({
+            file: packagePaths.module,
+            format: 'esm',
+            ...rollupOutputConfig
+        });
+        sh.echo(chalk.yellowBright(`  [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & esm]: `) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.module}`));
+
+        filesInfo.cache.forEach(function (cacheFolder) {
+            if (sh.test('-d', cacheFolder)) {
+                sh.rm('-rf', cacheFolder);
+            }
+        });
+
+        sh.echo(chalk.greenBright('Building finished!'));
+        done();
+    })();
+});
+
+gulp.task('example', function (done) {
+    sh.echo();
+    sh.echo(chalk.cyanBright(`Copy to example → ${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`));
+    sh.mkdir('-p', `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`);
+    sh.cp('-Rf', [filesInfo.srcFolder, filesInfo.distFolder, filesInfo.packageJsonPath], `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`);
+    sh.echo(chalk.greenBright('Copying finished!'));
+    done();
+});
+
+gulp.series('prepare', 'tsconfigJson', 'packageJson', 'rollup', 'example')();

packages/overlayscrollbars-react/dist/overlayscrollbars-react.esm.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import OverlayScrollbars from 'overlayscrollbars';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+class OverlayScrollbarsComponent extends Component {
+    constructor(props) {
+        super(props);
+        this._osInstance = null;
+        this._osTargetRef = React.createRef();
+    }
+    osInstance() {
+        return this._osInstance;
+    }
+    osTarget() {
+        return this._osTargetRef.current || null;
+    }
+    componentDidMount() {
+        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
+    }
+    componentWillUnmount() {
+        if (OverlayScrollbars.valid(this._osInstance)) {
+            this._osInstance.destroy();
+            this._osInstance = null;
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (OverlayScrollbars.valid(this._osInstance)) {
+            this._osInstance.options(this.props.options);
+        }
+    }
+    render() {
+        let _a = this.props, divProps = __rest(_a, ["options", "extensions", "children"]);
+        return (React.createElement("div", Object.assign({}, divProps, { ref: this._osTargetRef }), this.props.children));
+    }
+}
+
+export { OverlayScrollbarsComponent };
+//# sourceMappingURL=overlayscrollbars-react.esm.js.map

packages/overlayscrollbars-react/dist/overlayscrollbars-react.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayscrollbars-react.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\r\n    children?: any;\r\n    options?: OverlayScrollbars.Options;\r\n    extensions?: OverlayScrollbars.Extensions;\r\n}\r\nexport interface OverlayScrollbarsComponentState { }\r\n\r\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\r\n    private _osInstance: OverlayScrollbars | null = null;\r\n    private _osTargetRef: RefObject<HTMLDivElement>;\r\n\r\n    constructor(props: OverlayScrollbarsComponentProps) {\r\n        super(props);\r\n        this._osTargetRef = React.createRef();\r\n    }\r\n\r\n    osInstance(): OverlayScrollbars | null {\r\n        return this._osInstance;\r\n    }\r\n\r\n    osTarget(): HTMLDivElement | null {\r\n        return this._osTargetRef.current || null;\r\n    }\r\n\r\n    componentDidMount() {\r\n        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        if (OverlayScrollbars.valid(this._osInstance)) {\r\n            this._osInstance.destroy();\r\n            this._osInstance = null;\r\n        }\r\n    }\r\n\r\n    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\r\n        if (OverlayScrollbars.valid(this._osInstance)) {\r\n            this._osInstance.options(this.props.options);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        let {\r\n            options,\r\n            extensions,\r\n            children,\r\n            ...divProps\r\n        } = this.props;\r\n\r\n        return (\r\n            <div {...divProps} ref={this._osTargetRef}>\r\n                {...this.props.children}\r\n            </div>\r\n        );\r\n    }\r\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,0BAA2B,SAAQ,SAA2E;IAIvH,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,gBAAW,GAA6B,IAAI,CAAC;QAKjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;KACzC;IAED,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,QAAQ;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1G;IAED,oBAAoB;QAChB,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ;IAED,kBAAkB,CAAC,SAA0C;QACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,IAAI,eAKU,EALV,AAIA,4DACU,CAAC;QAEf,QACI,6CAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;KACL;CACJ;;;;"}

packages/overlayscrollbars-react/dist/overlayscrollbars-react.js

@@ -0,0 +1,102 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('overlayscrollbars')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'overlayscrollbars'], factory) :
+    (global = global || self, factory(global.OverlayScrollbarsReact = {}, global.React, global.OverlayScrollbars));
+}(this, function (exports, React, OverlayScrollbars) { 'use strict';
+
+    var React__default = 'default' in React ? React['default'] : React;
+    OverlayScrollbars = OverlayScrollbars && OverlayScrollbars.hasOwnProperty('default') ? OverlayScrollbars['default'] : OverlayScrollbars;
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    var OverlayScrollbarsComponent = (function (_super) {
+        __extends(OverlayScrollbarsComponent, _super);
+        function OverlayScrollbarsComponent(props) {
+            var _this = _super.call(this, props) || this;
+            _this._osInstance = null;
+            _this._osTargetRef = React__default.createRef();
+            return _this;
+        }
+        OverlayScrollbarsComponent.prototype.osInstance = function () {
+            return this._osInstance;
+        };
+        OverlayScrollbarsComponent.prototype.osTarget = function () {
+            return this._osTargetRef.current || null;
+        };
+        OverlayScrollbarsComponent.prototype.componentDidMount = function () {
+            this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
+        };
+        OverlayScrollbarsComponent.prototype.componentWillUnmount = function () {
+            if (OverlayScrollbars.valid(this._osInstance)) {
+                this._osInstance.destroy();
+                this._osInstance = null;
+            }
+        };
+        OverlayScrollbarsComponent.prototype.componentDidUpdate = function (prevProps) {
+            if (OverlayScrollbars.valid(this._osInstance)) {
+                this._osInstance.options(this.props.options);
+            }
+        };
+        OverlayScrollbarsComponent.prototype.render = function () {
+            var _a = this.props, options = _a.options, extensions = _a.extensions, children = _a.children, divProps = __rest(_a, ["options", "extensions", "children"]);
+            return (React__default.createElement("div", __assign({}, divProps, { ref: this._osTargetRef }), this.props.children));
+        };
+        return OverlayScrollbarsComponent;
+    }(React.Component));
+
+    exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=overlayscrollbars-react.js.map

packages/overlayscrollbars-react/dist/overlayscrollbars-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayscrollbars-react.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\r\n    children?: any;\r\n    options?: OverlayScrollbars.Options;\r\n    extensions?: OverlayScrollbars.Extensions;\r\n}\r\nexport interface OverlayScrollbarsComponentState { }\r\n\r\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\r\n    private _osInstance: OverlayScrollbars | null = null;\r\n    private _osTargetRef: RefObject<HTMLDivElement>;\r\n\r\n    constructor(props: OverlayScrollbarsComponentProps) {\r\n        super(props);\r\n        this._osTargetRef = React.createRef();\r\n    }\r\n\r\n    osInstance(): OverlayScrollbars | null {\r\n        return this._osInstance;\r\n    }\r\n\r\n    osTarget(): HTMLDivElement | null {\r\n        return this._osTargetRef.current || null;\r\n    }\r\n\r\n    componentDidMount() {\r\n        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        if (OverlayScrollbars.valid(this._osInstance)) {\r\n            this._osInstance.destroy();\r\n            this._osInstance = null;\r\n        }\r\n    }\r\n\r\n    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\r\n        if (OverlayScrollbars.valid(this._osInstance)) {\r\n            this._osInstance.options(this.props.options);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        let {\r\n            options,\r\n            extensions,\r\n            children,\r\n            ...divProps\r\n        } = this.props;\r\n\r\n        return (\r\n            <div {...divProps} ref={this._osTargetRef}>\r\n                {...this.props.children}\r\n            </div>\r\n        );\r\n    }\r\n}"],"names":["tslib_1.__extends","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUgDA,8CAA2E;QAIvH,oCAAY,KAAsC;YAAlD,YACI,kBAAM,KAAK,CAAC,SAEf;YANO,iBAAW,GAA6B,IAAI,CAAC;YAKjD,KAAI,CAAC,YAAY,GAAGC,cAAK,CAAC,SAAS,EAAE,CAAC;;SACzC;QAED,+CAAU,GAAV;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;SAC3B;QAED,6CAAQ,GAAR;YACI,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;SAC5C;QAED,sDAAiB,GAAjB;YACI,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC1G;QAED,yDAAoB,GAApB;YACI,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;SACJ;QAED,uDAAkB,GAAlB,UAAmB,SAA0C;YACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAChD;SACJ;QAED,2CAAM,GAAN;YACI,IAAI,eAKU,EAJV,oBAAO,EACP,0BAAU,EACV,sBAAQ,EACR,4DACU,CAAC;YAEf,QACIA,iDAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;SACL;QACL,iCAAC;IAAD,CAhDA,CAAgDC,eAAS;;;;;;;;;;;;"}

packages/overlayscrollbars-react/dist/types/OverlayScrollbarsComponent.d.ts

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import OverlayScrollbars from "overlayscrollbars";
+export interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: any;
+    options?: OverlayScrollbars.Options;
+    extensions?: OverlayScrollbars.Extensions;
+}
+export interface OverlayScrollbarsComponentState {
+}
+export declare class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {
+    private _osInstance;
+    private _osTargetRef;
+    constructor(props: OverlayScrollbarsComponentProps);
+    osInstance(): OverlayScrollbars | null;
+    osTarget(): HTMLDivElement | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps): void;
+    render(): JSX.Element;
+}

packages/overlayscrollbars-react/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './OverlayScrollbarsComponent';

packages/overlayscrollbars-react/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "overlayscrollbars-react",
+    "version": "0.1.0",
+    "description": "OverlayScrollbars wrapper for React.",
+    "keywords": [
+        "overlayscrollbars",
+        "react"
+    ],
+    "files": [
+        "./src",
+        "./dist",
+        "README.md"
+    ],
+    "homepage": "https://kingsora.github.io/OverlayScrollbars",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/KingSora/OverlayScrollbars"
+    },
+    "bugs": {
+        "url": "https://github.com/KingSora/OverlayScrollbars/issues"
+    },
+    "main": "./dist/overlayscrollbars-react.js",
+    "module": "./dist/overlayscrollbars-react.esm.js",
+    "typings": "./dist/types/index.d.ts",
+    "author": "KingSora | Rene Haas",
+    "license": "MIT",
+    "devDependencies": {
+        "@types/overlayscrollbars": "^1.9.0",
+        "@types/react": "^16.4.0",
+        "chalk": "^2.4.2",
+        "gulp": "^4.0.2",
+        "gulp-json-editor": "^2.5.2",
+        "overlayscrollbars": "^1.9.0",
+        "react": "^16.4.0",
+        "rollup": "^1.17.0",
+        "rollup-plugin-commonjs": "^10.0.1",
+        "rollup-plugin-node-resolve": "^5.2.0",
+        "rollup-plugin-typescript2": "^0.22.0",
+        "shelljs": "^0.8.3",
+        "typescript": "^3.0.3"
+    },
+    "peerDependencies": {
+        "react": "^16.4.0",
+        "overlayscrollbars": "^1.9.0"
+    },
+    "scripts": {
+        "build": "node build.js",
+        "example": "cd example && npm start",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    }
+}

packages/overlayscrollbars-react/rollup.config.js

@@ -0,0 +1,38 @@
+import commonjs from 'rollup-plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
+import resolve from 'rollup-plugin-node-resolve';
+import pkg from './package.json';
+
+const globals = { 
+    'react': 'React',
+    'overlayscrollbars': 'OverlayScrollbars'
+};
+const external = [...Object.keys(pkg.devDependencies), ...Object.keys(pkg.peerDependencies)];
+
+export default {
+    input: './src/index.ts',
+    output: [
+        {
+        name: 'OverlayScrollbarsReact',
+        globals: globals,
+            file: pkg.main,
+            format: 'umd',
+            exports: 'named',
+            sourcemap: true
+        },
+        {
+            file: pkg.module,
+            format: 'es',
+            exports: 'named',
+            sourcemap: true
+        }
+    ],
+    external: external,
+    plugins: [
+        typescript({
+            useTsconfigDeclarationDir : true
+        }),
+        resolve(),
+        commonjs()
+    ]
+};

packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx

@@ -0,0 +1,59 @@
+import React, { Component, RefObject } from 'react';
+import OverlayScrollbars from "overlayscrollbars";
+
+export interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: any;
+    options?: OverlayScrollbars.Options;
+    extensions?: OverlayScrollbars.Extensions;
+}
+export interface OverlayScrollbarsComponentState { }
+
+export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {
+    private _osInstance: OverlayScrollbars | null = null;
+    private _osTargetRef: RefObject<HTMLDivElement>;
+
+    constructor(props: OverlayScrollbarsComponentProps) {
+        super(props);
+        this._osTargetRef = React.createRef();
+    }
+
+    osInstance(): OverlayScrollbars | null {
+        return this._osInstance;
+    }
+
+    osTarget(): HTMLDivElement | null {
+        return this._osTargetRef.current || null;
+    }
+
+    componentDidMount() {
+        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
+    }
+
+    componentWillUnmount() {
+        if (OverlayScrollbars.valid(this._osInstance)) {
+            this._osInstance.destroy();
+            this._osInstance = null;
+        }
+    }
+
+    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {
+        if (OverlayScrollbars.valid(this._osInstance)) {
+            this._osInstance.options(this.props.options);
+        }
+    }
+
+    render() {
+        let {
+            options,
+            extensions,
+            children,
+            ...divProps
+        } = this.props;
+
+        return (
+            <div {...divProps} ref={this._osTargetRef}>
+                {...this.props.children}
+            </div>
+        );
+    }
+}

packages/overlayscrollbars-react/src/index.ts

@@ -0,0 +1 @@
+export * from './OverlayScrollbarsComponent';

packages/overlayscrollbars-react/tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "allowJs": false,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "baseUrl": "./",
+        "outDir": "./dist",
+        "target": "es5",
+        "sourceMap": true,
+        "inlineSources": true,
+        "jsx": "react",
+        "lib": [
+            "es6",
+            "dom",
+            "es2016",
+            "es2017"
+        ],
+        "declaration": true,
+        "declarationDir": "./dist/types",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "module": "es2015",
+        "moduleResolution": "node",
+        "removeComments": true
+    },
+    "include": [
+        "./src"
+    ],
+    "exclude": [
+        "./dist",
+        "./example",
+        "node_modules"
+    ]
+}