👌 IMPROVE: demo-app

Author: pettiboy

README.md

@@ -110,11 +110,11 @@ import ScrollSpy from "react-ui-scrollspy";
 
 ### 🔧 Customize Attributes
 
-| Attributes         | Type      | Description                                                                      | Default               | Required |
-| :----------------- | :-------- | :------------------------------------------------------------------------------- | :-------------------- | :------- |
-| `useDataAttribute` | `string`  | To customize the string after `data-`                                            | `"to-scrollspy-id"`   | no       |
-| `activeClass`      | `string`  | To customize the `class` added when the `Element` in view                        | `"active-scroll-spy"` | no       |
-| `useBoxMethod`     | `boolean` | Set to `false` if you want your spy to be active if 50% of that `div` is in view | `true`                | no       |
+| Attributes         | Type      | Description                                                                                              | Default               | Required |
+| :----------------- | :-------- | :------------------------------------------------------------------------------------------------------- | :-------------------- | :------- |
+| `useDataAttribute` | `string`  | To customize the string after `data-`                                                                    | `"to-scrollspy-id"`   | no       |
+| `activeClass`      | `string`  | To customize the `class` added when the `Element` in view                                                | `"active-scroll-spy"` | no       |
+| `useBoxMethod`     | `boolean` | Set to `false` if you want your spy to be active only if more than`50%` of that `div` is in the viewport | `true`                | no       |
 
 ## 📝 Authors
 

demo-app/src/components/Buttons/Buttons.tsx

@@ -9,7 +9,7 @@ const Buttons = (props: Props) => {
       href="https://github.com/pettiboy/react-ui-scrollspy/"
       target="_blank"
     >
-      <div className={"button button-size"}>
+      <div className={"button button-size text-dark"}>
         <div style={{ marginRight: 10, marginTop: 5 }}>
           <img
             src={`${process.env.PUBLIC_URL}/assets/gh-logo.png`}

demo-app/src/index.css

@@ -67,5 +67,5 @@ a {
 .ss-active-demo-2 {
   border-radius: 10px;
   transition: all 0.5s;
-  background: blue;
+  background: brown;
 }

demo-app/src/pages/Demo2.tsx

@@ -68,9 +68,17 @@ const Demo2 = (props: Props) => {
           </div>
 
           <div className="col-md-8 col-sm-8 col-lg-8 flex-column d-flex justify-content-center p-0">
-            <div ref={parentScrollContainerRef}>
+            <div
+              ref={parentScrollContainerRef}
+              // style={{
+              //   position: "relative",
+              //   overflowY: "scroll",
+              //   height: "50vh",
+              // }}
+            >
               <ScrollSpy
                 useBoxMethod
+                // parentScrollContainerRef={parentScrollContainerRef}
                 activeClass="ss-active-demo-2"
                 scrollThrottle={100}
               >