@maxweek/react-scroller - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

package.json

 {
   "name": "@maxweek/react-scroller",
   "description": "Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "type": "module",
@@ -6,0 +6,0 @@ "author": "Max Nedelko",

README.md

@@ -20,2 +20,6 @@ # React-scroller
 - Extendable
+- Auto updating on child changes
+- Events
+- Methods
+- Ref with methods and properties (with interface)
 
@@ -29,4 +33,4 @@ ## Todo
 - [x] Class extending
-- [ ] Methods
-- [ ] Events
+- [x] Methods
+- [x] Events
 
@@ -39,26 +43,94 @@ ## Installation
 
+## First Usage
+
+```ts
+import { Scroller } from "@maxweek/react-scroller";
+
+const YourComponent = () => {
+  <Scroller>
+    {/* Your content */}
+  </Scroller>
+}
+```
+
+
 ## Usage
 
 ```ts
-import Scroller from "@maxweek/react-scroller";
+import { IScrollerRef, Scroller, IScroller, IScrollerProperties } from "@maxweek/react-scroller";
 
-<Scroller
-  needBar={true}
-  barAltPosition={false}
-  horizontal={false}
-  grab={true}
-  borderFade={true}
-  borderPadding={true}
-  grabCursor={true}
-  className={'your-scroller-class'}
-  barClassName={'your-scroller-bar-class'}
-  barRollerClassName={'your-scroller-bar-roller-class'}
-  contentClassName={'your-scroller-content-class'}
->
-  {/* Your content */}
-</Scroller>
+const YourComponent = () => {
+  // Ref
+  const scrollerRef = useRef<IScrollerRef>(null);
+
+  // Methods
+  const scrollToStart = () => {
+    scrollerRef.current?.scrollToStart()          // scroll to start
+  }
+  const scrollToEnd = () => {
+    scrollerRef.current?.scrollToEnd()            // scroll to end
+  }
+  const scrollTo = () => {
+    scrollerRef.current?.scrollTo(100)            // scroll to 100px
+  }
+  const update = () => {
+    scrollerRef.current?.update()                 // update scroll calculations
+  }
+  const getScrollerRef = () => {
+    let ref = scrollerRef.current?.scrollRef      // get ref of main scroller box to contol manualy
+  }
+  const getProperties = () => {
+    if (!scrollerRef.current) return
+    let properties: IScrollerProperties = scrollerRef.current?.getProperties() // get properties of scroller object
+  }
+
+  // Scroller
+  <Scroller
+    ref={scrollerRef}
+    needBar={true}
+    barAltPosition={false}
+    horizontal={false}
+    grab={true}
+    borderFade={true}
+    borderPadding={true}
+    grabCursor={true}
+    className={'your-scroller-class'}
+    barClassName={'your-scroller-bar-class'}
+    barRollerClassName={'your-scroller-bar-roller-class'}
+    contentClassName={'your-scroller-content-class'}
+    onScroll={() => console.log('reach end')}
+    onReachStart={() => console.log('reach start')}
+    onReachEnd={() => console.log('scroll')}
+  >
+    {/* Your content */}
+  </Scroller>
+}
 ```
 
+Full usage you can see on https://github.com/maxweek/react-scroller
+
 ## Props
 
+```js
+  import { IScroller } from "./scroller/scroller"
+
+  const props: Partial<IScroller> = {
+    needBar: true,
+    barAltPosition: true,
+    horizontal: true,
+    grab: true,
+    borderFade: true,
+    borderPadding: true,
+    grabCursor: true,
+    className: 'your-scroller-class',
+    barClassName: 'your-scroller-bar-class',
+    barRollerClassName: 'your-scroller-bar-roller-class',
+    contentClassName: 'your-scroller-content-class',
+    onScroll: () => console.log('reach end'),
+    onReachStart: () => console.log('reach start'),
+    onReachEnd: () => console.log('scroll'),
+  }
+
+```
+
 <table>
@@ -75,2 +147,3 @@ <thead>
     <tr><td>children</td><td>ReactNode</td><td></td><td>React child</td></tr>
+    <tr><td>ref?</td><td>IScrollerRef</td><td></td><td>Ref to control the element</td></tr>
     <tr><td>needBar?</td><td>boolean</td><td>false</td><td>enables scrollbar</td></tr>
@@ -87,5 +160,41 @@ <tr><td>barAltPosition?</td><td>boolean</td><td>false</td><td>changes scrollbar position, default at right - changes to left, when horizontal enabled - changes bottom to top</td></tr>
     <tr><td>contentClassName?</td><td>string</td><td>''</td><td>class for content wrapper</td></tr>
+    <tr><td>onScroll?</td><td>event</td><td>() => {}</td><td>Event on 'scroll'</td></tr>
+    <tr><td>onReachStart?</td><td>event</td><td>() => {}</td><td>Event on 'scroll' reaches start</td></tr>
+    <tr><td>onReachEnd?</td><td>event</td><td>() => {}</td><td>Event on 'scroll' reaches end</td></tr>
   </tbody>
 </table>
 
+
+## Methods
+
+```js
+
+  import { IScrollerRef, Scroller, IScroller, IScrollerProperties } from "./scroller/scroller"
+
+  const scrollerRef = useRef<IScrollerRef>(null) 
+
+  // Methods
+  const scrollToStart = () => {
+    scrollerRef.current?.scrollToStart()          // scroll to start
+  }
+  const scrollToEnd = () => {
+    scrollerRef.current?.scrollToEnd()            // scroll to end
+  }
+  const scrollTo = () => {
+    scrollerRef.current?.scrollTo(100)            // scroll to 100px
+  }
+  const update = () => {
+    scrollerRef.current?.update()                 // update scroll calculations
+  }
+  const getScrollerRef = () => {
+    let ref = scrollerRef.current?.scrollRef      // get ref of main scroller box to contol manualy
+  }
+  const getProperties = () => {
+    if (!scrollerRef.current) return
+    let properties: IScrollerProperties = scrollerRef.current?.getProperties() // get properties of scroller object
+  }
+
+
+```
+
 ### License
@@ -95,2 +204,3 @@ - React Scroll is licensed under the MIT License. Explore this to understand terms and conditions of the license- https://opensource.org/licenses/MIT
 Thank you for using my package!
-Max Nedelko
+
+Max Nedelko 2024

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56584

increased by6.32%

Number of lines in readme file

200

increased by122.22%

No dependency changes