update docs

rommguy · Mar 2, 2024 · 25ba8cc · 25ba8cc
1 parent e86f423
commit 25ba8cc
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -20,20 +20,17 @@ npm i react-custom-scroll --save
 - Scrollbar is above the content instead of floating to the side - same layout on scrolled content as not scrolled content
 
 ### How to use ?
-Custom scroll component is available in commonJS format so you can just require it after installing.  
-There is also a UMD version - inside dist directory.           
-In both cases **you have to include the customScroll.css** file in your page.  
+Custom scroll component is available in module or commonJS format.   
 It is located in /dist directory       
 **From unpkg cdn:**      
 * [Js file](https://unpkg.com/[email protected]/dist/reactCustomScroll)
-* [css file](https://unpkg.com/[email protected]/dist/customScroll.css)
 
 Wrap your content with the custom scroll component  
 Remove any overflow style properties from your content root component - The custom scroll will take care of it
 
 
 ```js
-import CustomScroll from 'react-custom-scroll';
+import { CustomScroll } from "react-custom-scroll";
 ```
 
 ```jsx
@@ -48,7 +45,7 @@ Your own custom design can be applied by styling these 2 classes in your css:
 - rcs-custom-scrollbar - this class styles the container of the scroll handle, you can use it if your handle width is greater than the default.  
 - rcs-inner-handle - this class styles the handle itself, you can use it to change the color, background, border and such of the handle  
 
-You can see a usage example in example/firstComp/firstComp.scss  
+You can see a usage example in the demo page.  
 
 ### Options (react props)
 
@@ -65,6 +62,7 @@ This prop will override any value given to heightRelativeToParent when setting t
 - **scrollTo**: number, default undefined. Will scroll content to the given value.
 - **keepAtBottom**: boolean, default false. For dynamic content, will keep the scroll position at the bottom of the content, when the content changes, if the position was at the bottom before the change. [See example here](http://rommguy.github.io/react-custom-scroll/exampleDist/index.html#dynamic-content-example)
 - **className**: string, default undefined. Allows adding your own class name to the root element.
+- **handleClass**: string. Can be used to replace the className given to the scroll handle, which is 'rcs-inner-handle' by default.
 
 ##### Example for heightRelativeToParent
 

diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.es.js.map b/dist/index.es.js.map
diff --git a/dist/index.umd.js b/dist/index.umd.js
diff --git a/dist/index.umd.js.map b/dist/index.umd.js.map
diff --git a/exampleDist/assets/index-IemJL0za.js → exampleDist/assets/index-7LHltgpN.js b/exampleDist/assets/index-IemJL0za.js → exampleDist/assets/index-7LHltgpN.js
diff --git a/exampleDist/index.html b/exampleDist/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React custom scroll demo</title>
-    <script type="module" crossorigin src="/react-custom-scroll/exampleDist/assets/index-IemJL0za.js"></script>
+    <script type="module" crossorigin src="/react-custom-scroll/exampleDist/assets/index-7LHltgpN.js"></script>
     <link rel="stylesheet" crossorigin href="/react-custom-scroll/exampleDist/assets/index-dq_QFCS8.css">
   </head>
   <body>

diff --git a/src/customScroll.tsx b/src/customScroll.tsx
@@ -524,7 +524,9 @@ export class CustomScroll extends Component<
                   className="rcs-custom-scroll-handle"
                   style={scrollHandleStyle}
                 >
-                  <ScrollHandle className={this.props.handleClass || ""} />
+                  <ScrollHandle
+                    className={this.props.handleClass || "rcs-inner-handle"}
+                  />
                 </div>
               </CustomScrollbar>
             </div>