use-carousel-hook - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
     "name": "use-carousel-hook",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "description": "Adds functionality for carousels using React hooks",
@@ -33,3 +33,12 @@ "main": "dist/index.js",
     "author": "Nicholas Neale (devallama)",
-    "license": "ISC"
+    "license": "ISC",
+    "keywords": [
+        "react",
+        "hook",
+        "carousel",
+        "slider"
+    ],
+    "bugs": {
+        "url": "https://gitlab.com/devallama/use-carousel-hook/-/issues"
+    }
 }

README.md

 # useCarousel
 
+[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://gitlab.com/devallama/use-carousel-hook/-/blob/main/LICENSE)
+[![npm version](https://img.shields.io/npm/v/use-carousel-hook.svg)](https://www.npmjs.com/package/use-carousel-hook)
+
 useCarousel is a React hook for adding functions to create a sliding carousel.
@@ -13,10 +16,10 @@
 
-| Property         | Type                                     | Description                                                                       |
-| ---------------- | ---------------------------------------- | --------------------------------------------------------------------------------- |
-| ref              | React.MutableRefObject\<HTMLDivElement>  | Attach this ref to your carousel element that contains your cards/elements.       |
-| previous         | () => void;                              | Go to the previous element in the carousel.                                       |
-| next             | () => void;                              | Go to the next element in the carousel.                                           |
-| setCurrent       | (current: number) => void;               | Go to a specific element index in the carousel.                                   |
-| reset            | () => void;                              | Go to the beginning of the carousel.                                              |
-| position         | { isAtStart: boolean; isAtEnd: boolean } | Position of the carousel. Can be used to disable next/previous buttons if needed. |
+| Property   | Type                                     | Description                                                                              |
+| ---------- | ---------------------------------------- | ---------------------------------------------------------------------------------------- |
+| ref        | React.MutableRefObject\<HTMLDivElement>  | Attach this ref to your carousel element that contains your cards/elements.              |
+| previous   | (amount: number = 1) => void;            | Go to the previous element in the carousel. Can set amount to decrease by, default is 1. |
+| next       | (amount: number = 1) => void;            | Go to the next element in the carousel. Can set amount to increase by, default is 1.     |
+| setCurrent | (current: number) => void;               | Go to a specific element index in the carousel.                                          |
+| reset      | () => void;                              | Go to the beginning of the carousel.                                                     |
+| position   | { isAtStart: boolean; isAtEnd: boolean } | Position of the carousel. Can be used to disable next/previous buttons if needed.        |
 
@@ -35,5 +38,7 @@ ### Code example
         <div>
-            <button onClick={previous}>Previous</button>
-            <button onClick={next}>Next</button>
-            <button onClick={reset}>Reset</button>
+            <button onClick={() => previous()}>Previous</button>
+            <button onClick={() => previous(2)}>Go back 2 items</button>
+            <button onClick={() => next()}>Next</button>
+            <button onClick={() => next(2)}>Go forward 2 items</button>
+            <button onClick={() => reset()}>Reset</button>
             <button onClick={() => setCurrent(2)}>Set index to 2</button>
@@ -62,4 +67,4 @@ <Inner ref={ref}>
 
-````typescript
+```typescript
 const { ref, previous, next } = useCarousel({ scrollBehavior: 'auto', direction: 'vertical' });
-````
+```

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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9787

increased by13.09%

Number of package files

10

increased by11.11%

Number of low maintenance alerts

0

decreased by-100%

Number of lines in readme file

68

increased by7.94%

No dependency changes