feat: extract constants as a separate entrypoint

.size-limit

@@ -2,6 +2,6 @@
   {
     path: "dist/es2015/index.js",
     ignore: ["react-dom", "tslib"],
-    limit: "1 KB"
+    limit: "1.2 KB"
   }
 ]

README.md

@@ -24,13 +24,17 @@ You dont need this option in normal cases.
 To prevent content jumps __position:fixed__ elements with `right:0`  should have additional classname applied.
 It will just provide a _non-zero_ right, when it needed, to maintain the right "gap".
 ```js
-import {zeroRightClassName,fullWidthClassName} from 'react-remove-scroll-bar';
+import {zeroRightClassName,fullWidthClassName, noScrollbarsClassName} from 'react-remove-scroll-bar';
 
 // to set `right:0` on an element
 <div className={zeroRightClassName} />
 
 // to set `width:100%` on an element
 <div className={fullWidthClassName} />
+
+// to remove scrollbar from an element
+<div className={fullWidthClassName} />
+
 ```
 
 # Size

constants/package.json

@@ -0,0 +1,8 @@
+{
+  "description": "separate entrypoint for constants only",
+  "private": true,
+  "main": "../dist/es5/constants.js",
+  "jsnext:main": "../dist/es2015/constants.js",
+  "module": "../dist/es2015/constants.js",
+  "sideEffects": false
+}

package.json

@@ -22,7 +22,6 @@
   "author": "Anton Korzunov <thekashey@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "size-limit": "^0.21.1",
     "ts-react-toolbox": "^0.2.2"
   },
   "engines": {
@@ -35,7 +34,8 @@
   "module": "dist/es2015/index.js",
   "types": "dist/es5/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "constants"
   ],
   "repository": "https://github.com/theKashey/react-remove-scroll-bar",
   "dependencies": {

src/component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {styleSinglentone} from 'react-style-singleton';
 import {GapMode, GapOffset, getGapWidth, zeroGap} from './utils';
+import {fullWidthClassName, zeroRightClassName, noScrollbarsClassName} from "./constants";
 
 export interface BodyScroll {
   noRelative?: boolean;
@@ -19,44 +20,45 @@ const Style = styleSinglentone();
 // we could not repeat this operation
 // thus we are using style-singleton - only the first "yet correct" style will be applied.
 const getStyles = ({left, top, right, gap}: GapOffset, allowRelative: boolean, gapMode: GapMode = 'margin', important: string) => `
+  .${noScrollbarsClassName} {
+   overflow: hidden ${important};
+   padding-right: ${gap}px ${important};
+  }
   body {
     overflow: hidden ${important};
     ${
   [
     allowRelative && `position: relative ${important};`,
-    gapMode == 'margin' && `
+    gapMode === 'margin' && `
     padding-left: ${left}px;
     padding-top: ${top}px;
     padding-right: ${right}px;
     margin-left:0;
     margin-top:0;
     margin-right: ${gap}px ${important};
     `,
-    gapMode == 'padding' && `padding-right: ${gap}px ${important};`,
+    gapMode === 'padding' && `padding-right: ${gap}px ${important};`,
   ].filter(Boolean).join('')
   }
   }
   
-  .right-scroll-bar-position {
+  .${zeroRightClassName} {
     right: ${gap}px ${important};
   }
   
-  .width-before-scroll-bar {
+  .${fullWidthClassName} {
     margin-right: ${gap}px ${important};
   }
   
-  .right-scroll-bar-position .right-scroll-bar-position {
+  .${zeroRightClassName} .${zeroRightClassName} {
     right: 0 ${important};
   }
   
-  .width-before-scroll-bar .width-before-scroll-bar {
+  .${fullWidthClassName} .${fullWidthClassName} {
     margin-right: 0 ${important};
   }
 `;
 
-export const zeroRightClassName = 'right-scroll-bar-position';
-export const fullWidthClassName = 'width-before-scroll-bar';
-
 export class RemoveScrollBar extends React.Component<BodyScroll, BodyState> {
   state = {
     gap: getGapWidth(this.props.gapMode)
@@ -65,9 +67,7 @@ export class RemoveScrollBar extends React.Component<BodyScroll, BodyState> {
   componentDidMount() {
     const gap = getGapWidth(this.props.gapMode);
     if (gap !== this.state.gap) {
-      this.setState({
-        gap
-      })
+      this.setGap(gap);
     }
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', this.onResize);
@@ -84,17 +84,21 @@ export class RemoveScrollBar extends React.Component<BodyScroll, BodyState> {
     if (!this.state.gap) {
       const gap = getGapWidth(this.props.gapMode);
       if (gap !== this.state.gap) {
-        this.setState({gap})
+        this.setGap(gap);
       }
     }
   }
 
+  setGap(gap: GapOffset) {
+    this.setState({gap});
+  }
+
   onResize = () => {
     this.forceUpdate();
     if (this.state.gap && this.props.dynamic) {
       if (window.innerHeight > document.body.offsetHeight) {
         // reset state to re-evaluate
-        this.setState({gap: zeroGap})
+        this.setGap(zeroGap);
       }
     }
   };

src/constants.ts

@@ -0,0 +1,3 @@
+export const zeroRightClassName = 'right-scroll-bar-position';
+export const fullWidthClassName = 'width-before-scroll-bar';
+export const noScrollbarsClassName = 'with-scroll-bars-hidden';

src/index.ts

@@ -1,9 +1,13 @@
-import {RemoveScrollBar, zeroRightClassName, fullWidthClassName} from './component';
+import {RemoveScrollBar} from './component';
 import {getGapWidth} from './utils'
+import {zeroRightClassName, fullWidthClassName, noScrollbarsClassName} from './constants';
 
 export {
   RemoveScrollBar,
+
   zeroRightClassName,
   fullWidthClassName,
+  noScrollbarsClassName,
+
   getGapWidth
 }

src/utils.ts

@@ -14,15 +14,17 @@ export const zeroGap = {
   gap: 0,
 };
 
+const parse = (x: string | null) => parseInt(x || '', 10) || 0;
+
 const getOffset = (gapMode: GapMode): number[] => {
   const cs = window.getComputedStyle(document.body);
   const left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
   const top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
   const right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
   return [
-    parseInt(left || '', 10) || 0,
-    parseInt(top || '', 10) || 0,
-    parseInt(right || '', 10) || 0
+    parse(left),
+    parse(top),
+    parse(right),
   ];
 };