@udooku/react-image-comparison-slider NPM

Installation

npm i @udooku/react-image-comparison-slider

yarn add @udooku/react-image-comparison-slider

Usage

import ImageSlider from "@udooku/react-image-comparison-slider";

<div style={{ width: 700, height: 450 }}>
    <ImageSlider
        image1=""
        image2=""
        onSlide={() => {
          console.log("sliding");
        }}
    />
</div>

Props

Props	Type	Default	Description
image1	string	-	First image's source (URL, base64 string etc.)
image2	string	-	Second image's source (URL, base64 string etc.)
alt1	string	`"alt1"`	First image's alt text
alt2	string	`"alt2"`	Second image's alt text
sliderColor	string	`"red"`	Slider's color. Should be valid CSS color expression.
sliderWidth	number	3	Slider's width in pixel.
showHandle	boolean	true	If false, hides slider handle.
handleBackgroundColor	string	`"white"`	Background color of the slider's handle.
handleColor	string	`"red"`	Background color of the triangles on the slider's handle.
customHandle	DOM Element	null	Renders the passed DOM element as a slider handle.
sliderInitialPosition	number	0.5	Slider's initial position between 0 and 1.
leftLabelText	string	null	A label for the first image.
rightLabelText	string	null	A label for the second image.
showPlaceholder	boolean	true	Placeholder is shown while waiting for full image to load
customPlaceholder	DOM Element	null	Pass your custom placeholder component/element.

Callbacks

Props	Type	Default	Description
onSlide	function	-	A callback function which is invoked on slider's position change.
onSlideEnd	function	-	A callback function which is invoked on mouseUp at the end of sliding.
onLoadFirstImage	function	-	Is invoked when the first image has finished loading.
onLoadSecondImage	function	-	Is invoked when the second image has finished loading.
onErrorFirstImage	function	-	Is invoked when an error occurs loading the first image.
onErrorSecondImage	function	-	Is invoked when an error occurs loading the second image.

Animation

Props	Type	Default	Description
animate	boolean	false	Animates slider.
animationCycleDuration	number	5000	Duration of animation in miliseconds.

slider react image comparison photo comparison

abab accepts acorn acorn-globals acorn-jsx acorn-walk ajv ajv-errors ajv-keywords ansi-colors ansi-escapes ansi-html ansi-regex ansi-styles anymatch aproba argparse arr-diff arr-flatten arr-union array-equal array-flatten array-union array-uniq array-unique asn1 asn1.js assert assert-plus assign-symbols ast-types astral-regex async async-each async-limiter asynckit atob aws-sign2 aws4 babel-plugin-dynamic-import-node babel-plugin-istanbul babel-plugin-jest-hoist babel-preset-jest balanced-match base base64-js batch bcrypt-pbkdf big.js binary-extensions bindings bluebird bn.js body-parser bonjour boolbase brace-expansion braces brorand browser-process-hrtime browser-resolve browserify-aes browserify-cipher browserify-des browserify-rsa browserify-sign browserify-zlib browserslist bs-logger bser buffer buffer-from buffer-indexof buffer-xor builtin-status-codes bytes cacache cache-base callsites camel-case camelcase caniuse-lite capture-exit caseless chalk chardet chokidar chownr chrome-trace-event ci-info cipher-base class-utils clean-css cli-cursor cli-width cliui co code-point-at collect-v8-coverage collection-visit color-convert color-name combined-stream commander commondir compare-versions component-emitter compressible compression concat-map concat-stream connect-history-api-fallback console-browserify constants-browserify content-disposition content-type convert-source-map cookie cookie-signature copy-concurrently copy-descriptor core-js-compat core-util-is cosmiconfig create-ecdh create-hash create-hmac cross-spawn crypto-browserify css-select css-what cssesc cssom cssstyle csstype cyclist dashdash data-urls debug decamelize decode-uri-component deep-equal deep-is default-gateway define-properties define-property del delayed-stream depd des.js destroy detect-file detect-newline detect-node diff-sequences diffie-hellman dns-equal dns-packet dns-txt doctrine dom-converter dom-serializer domain-browser domelementtype domexception domhandler domutils duplexify ecc-jsbn ee-first electron-to-chromium elliptic emoji-regex emojis-list encodeurl end-of-stream enhanced-resolve entities errno error-ex es-abstract es-to-primitive es6-templates escape-html escape-string-regexp escodegen eslint eslint-scope eslint-utils eslint-visitor-keys espree esprima esquery esrecurse estraverse esutils etag eventemitter3 events eventsource evp_bytestokey exec-sh execa exit expand-brackets expand-tilde expect express extend extend-shallow external-editor extglob extsprintf fast-deep-equal fast-json-stable-stringify fast-levenshtein fastparse faye-websocket fb-watchman figgy-pudding figures file-entry-cache file-uri-to-path fill-range finalhandler find-cache-dir find-up find-versions findup-sync flat-cache flatted flush-write-stream follow-redirects for-in forever-agent form-data forwarded fragment-cache fresh from2 fs-write-stream-atomic fs.realpath function-bind functional-red-black-tree gensync get-caller-file get-stream get-value getpass glob glob-parent global-modules global-prefix globals globby graceful-fs growly handle-thing har-schema har-validator harmony-reflect has has-flag has-symbols has-value has-values hash-base hash.js he hmac-drbg homedir-polyfill hpack.js html-encoding-sniffer html-entities html-escaper html-minifier htmlparser2 http-deceiver http-errors http-parser-js http-proxy http-proxy-middleware http-signature https-browserify human-signals iconv-lite icss-utils ieee754 iferr ignore import-fresh import-local imurmurhash indexes-of infer-owner inflight inherits ini inquirer internal-ip interpret invariant invert-kv ip ip-regex ipaddr.js is-absolute-url is-accessor-descriptor is-arguments is-arrayish is-binary-path is-buffer is-callable is-ci is-data-descriptor is-date-object is-descriptor is-extendable is-extglob is-fullwidth-code-point is-generator-fn is-glob is-number is-path-cwd is-path-in-cwd is-path-inside is-plain-object is-promise is-regex is-stream is-symbol is-typedarray is-windows is-wsl isarray isexe isobject isstream istanbul-lib-coverage istanbul-lib-instrument istanbul-lib-report istanbul-lib-source-maps istanbul-reports jest-changed-files jest-cli jest-config jest-diff jest-docblock jest-each jest-environment-jsdom jest-environment-node jest-get-type jest-haste-map jest-jasmine2 jest-leak-detector jest-matcher-utils jest-message-util jest-mock jest-pnp-resolver jest-regex-util jest-resolve jest-resolve-dependencies jest-runner jest-runtime jest-serializer jest-snapshot jest-util jest-validate jest-watcher jest-worker js-tokens js-yaml jsbn jsdom jsesc json-parse-better-errors json-schema json-schema-traverse json-stable-stringify-without-jsonify json-stringify-safe json3 json5 jsprim killable kind-of kleur lcid leven levenary levn lines-and-columns loader-runner loader-utils locate-path lodash lodash.memoize lodash.sortby loglevel lolex loose-envify lower-case lru-cache make-dir make-error makeerror mamacro map-age-cleaner map-cache map-visit md5.js media-typer mem memory-fs merge-descriptors merge-stream methods micromatch miller-rabin mime mime-db mime-types mimic-fn minimalistic-assert minimalistic-crypto-utils minimatch minimist mississippi mixin-deep mkdirp move-concurrently ms multicast-dns multicast-dns-service-types mute-stream nan nanomatch natural-compare negotiator neo-async nice-try no-case node-forge node-int64 node-libs-browser node-modules-regexp node-notifier node-releases normalize-path npm-run-path nth-check number-is-nan nwsapi oauth-sign object-assign object-copy object-inspect object-is object-keys object-visit object.assign object.getownpropertydescriptors object.pick obuf on-finished on-headers once onetime opencollective-postinstall opn optionator original os-browserify os-locale os-tmpdir p-defer p-each-series p-finally p-is-promise p-limit p-locate p-map p-retry p-try pako parallel-transform param-case parent-module parse-asn1 parse-json parse-passwd parse5 parseurl pascalcase path-browserify path-dirname path-exists path-is-absolute path-is-inside path-key path-parse path-to-regexp path-type pbkdf2 performance-now picomatch pify pinkie pinkie-promise pirates pkg-dir please-upgrade-node pn portfinder posix-character-classes postcss postcss-modules-extract-imports postcss-modules-local-by-default postcss-modules-scope postcss-modules-values postcss-selector-parser postcss-value-parser prelude-ls pretty-error pretty-format private process process-nextick-args progress promise-inflight prompts proxy-addr prr psl public-encrypt pump pumpify punycode qs querystring querystring-es3 querystringify randombytes randomfill range-parser raw-body react-is readable-stream readdirp realpath-native recast regenerate regenerate-unicode-properties regenerator-runtime regenerator-transform regex-not regexp.prototype.flags regexpp regexpu-core regjsgen regjsparser relateurl remove-trailing-separator renderkid repeat-element repeat-string request request-promise-core request-promise-native require-directory require-main-filename requires-port resolve resolve-cwd resolve-dir resolve-from resolve-url restore-cursor ret retry rimraf ripemd160 rsvp run-async run-queue rxjs safe-buffer safe-regex safer-buffer sane saxes scheduler schema-utils select-hose selfsigned semver semver-compare semver-regex send serialize-javascript serve-index serve-static set-blocking set-value setimmediate setprototypeof sha.js shebang-command shebang-regex shellwords signal-exit sisteransi slash slice-ansi snapdragon snapdragon-node snapdragon-util sockjs sockjs-client source-list-map source-map source-map-resolve source-map-support source-map-url spdy spdy-transport split-string sprintf-js sshpk ssri stack-utils static-extend statuses stealthy-require stream-browserify stream-each stream-http stream-shift string_decoder string-length string-width string.prototype.trimleft string.prototype.trimright strip-ansi strip-bom strip-eof strip-final-newline strip-json-comments supports-color supports-hyperlinks symbol-tree table tapable terminal-link terser terser-webpack-plugin test-exclude text-table throat through through2 thunky timers-browserify tmp tmpl to-arraybuffer to-fast-properties to-object-path to-regex to-regex-range toidentifier toposort tough-cookie tr46 tslib tsutils tty-browserify tunnel-agent tweetnacl type-check type-detect type-fest type-is typedarray typedarray-to-buffer uglify-js unicode-canonical-property-names-ecmascript unicode-match-property-ecmascript unicode-match-property-value-ecmascript unicode-property-aliases-ecmascript union-value uniq unique-filename unique-slug unpipe unset-value upath upper-case uri-js urix url url-parse use util util-deprecate util.promisify utila utils-merge uuid v8-compile-cache v8-to-istanbul vary verror vm-browserify w3c-hr-time w3c-xmlserializer walker watchpack wbuf webidl-conversions webpack-dev-middleware webpack-log webpack-sources websocket-driver websocket-extensions whatwg-encoding whatwg-mimetype whatwg-url which which-module which-pm-runs word-wrap worker-farm wrap-ansi wrappy write write-file-atomic ws xml-name-validator xmlchars xtend y18n yallist yaml yargs yargs-parser

@everything-registry/sub-chunk-961 @infinitebrahmanuniverse/nolb-_ud

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago