@img-comparison-slider/react
Advanced tools
Comparing version 8.0.0 to 8.0.1
@@ -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 {}; |
@@ -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 |
{ | ||
"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", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
7515
62