use-carousel-hook - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

CHANGELOG.md

 # Changelog
 
+## [0.0.4]
+
+- `ref` accepts HTMLUListElement and HTMLDivElement types without casting, while still accepting generic HTMLElement type
+
 ## [0.0.3]
@@ -16,3 +20,3 @@
 - Fixed issue with going to last item from the start where multiple items are in view
-- Implement [@use-effect/did-update](https://www.npmjs.com/package/@use-effect/did-update) to stop unneeded renders on mount.
+- Implement [@use-effect/did-update](https://www.npmjs.com/package/@use-effect/did-update) to stop unneeded renders on mount
 
@@ -19,0 +23,0 @@ ## [0.0.1] (removed)

dist/useCarousel.d.ts

@@ -11,3 +11,3 @@ import React from 'react';
 interface CarouselHook {
-    ref: React.MutableRefObject<HTMLElement>;
+    ref: React.MutableRefObject<HTMLUListElement | HTMLDivElement | HTMLElement>;
     previous: () => void;
@@ -14,0 +14,0 @@ next: () => void;

package.json

 {
     "name": "use-carousel-hook",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "description": "Adds functionality for carousels using React hooks",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -16,10 +16,10 @@ # useCarousel
 
-| 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.        |
+| Property   | Type                                                                       | Description                                                                              |
+| ---------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| ref        | React.MutableRefObject\<HTMLUListElement \| HTMLDivElement \| HTMLElement> | 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.        |
 
@@ -31,3 +31,2 @@ ### Code example
 import { useCarousel } from 'use-carousel-hook';
-import { Inner, Item } from './carousel.styled';
 
@@ -45,8 +44,21 @@ const Carousel: React.FC = () => {
             <button onClick={() => setCurrent(2)}>Set index to 2</button>
-            <Inner ref={ref}>
-                <Item>Item 1</Item>
-                <Item>Item 2</Item>
-                <Item>Item 3</Item>
-                <Item>Item 4</Item>
-            </Inner>
+            /* ref accepts HTMLUListElement (recommended), HTMLDivElement and generic HTMLElement types (you will need to cast to the correct type) */
+            <ul ref={ref}>
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+                <li>Item 4</li>
+            </ul>
+            <div ref={ref}>
+                <div>Item 1</div>
+                <div>Item 2</div>
+                <div>Item 3</div>
+                <div>Item 4</div>
+            </div>
+            <span ref={ref as React.MutableRefObject<HTMLSpanElement>}>
+                <div>Item 1</div>
+                <div>Item 2</div>
+                <div>Item 3</div>
+                <div>Item 4</div>
+            </span>
         </div>
@@ -53,0 +65,0 @@ );

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

10736

increased by9.7%

Number of lines in readme file

80

increased by17.65%

No dependency changes