@img-comparison-slider/react - npm Package Compare versions

Comparing version 8.0.0 to 8.0.1

dist/index.d.ts

@@ -1,8 +0,3 @@
-import { FC, AllHTMLAttributes, ChangeEventHandler } from 'react';
-declare type HTMLImgComparisonSliderElement = HTMLElement & {
-    value: number;
-    handle: boolean;
-    hover: boolean;
-    direction: string;
-};
+import { type HTMLImgComparisonSliderElement } from 'img-comparison-slider';
+import { FC, AllHTMLAttributes, ChangeEventHandler, ForwardedRef } from 'react';
 declare type ImgComparisonSliderProps = AllHTMLAttributes<HTMLImgComparisonSliderElement> & {
@@ -15,4 +10,5 @@ value?: number | string;
     onSlide?: ChangeEventHandler<HTMLImgComparisonSliderElement>;
+    ref?: ForwardedRef<HTMLImgComparisonSliderElement>;
 };
+export { HTMLImgComparisonSliderElement };
 export declare const ImgComparisonSlider: FC<ImgComparisonSliderProps>;
-export {};

dist/index.js

@@ -21,25 +21,23 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImgComparisonSlider = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = require("react");
 if (typeof document !== 'undefined') {
     Promise.resolve().then(() => __importStar(require('img-comparison-slider')));
 }
-const ImgComparisonSlider = ({ children, onSlide, ...props }) => {
-    const ref = react_1.default.createRef();
-    react_1.default.useEffect(() => {
+exports.ImgComparisonSlider = (0, react_1.forwardRef)(({ children, onSlide, ...props }, ref) => {
+    const sliderRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
         if (props.value !== undefined) {
-            ref.current.value = parseFloat(props.value.toString());
+            sliderRef.current.value = parseFloat(props.value.toString());
         }
-    }, [props.value, ref]);
-    react_1.default.useEffect(() => {
+    }, [props.value, sliderRef]);
+    (0, react_1.useEffect)(() => {
         if (onSlide) {
             // @ts-ignore
-            ref.current.addEventListener('slide', onSlide);
+            sliderRef.current.addEventListener('slide', onSlide);
         }
     }, []);
-    return react_1.default.createElement('img-comparison-slider', Object.assign({
+    (0, react_1.useImperativeHandle)(ref, () => sliderRef.current, [sliderRef]);
+    return (0, react_1.createElement)('img-comparison-slider', Object.assign({
         class: props.className ? `${props.className} rendered` : 'rendered',
@@ -50,6 +48,5 @@ // Align tabIndex between the web and React components
         tabIndex: 0,
-        ref,
+        ref: sliderRef,
     }, props), children);
-};
-exports.ImgComparisonSlider = ImgComparisonSlider;
+});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@img-comparison-slider/react",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "React wrapper for img-comparison-slider",
@@ -5,0 +5,0 @@ "homepage": "https://img-comparison-slider.sneas.io",

No alert changes

Improved metrics

Total package byte prevSize

7515

increased by5.8%

Worsened metrics

Lines of code

62

decreased by-10.14%

No dependency changes