react-ronin - npm Package Compare versions

Comparing version 2.0.3-image-component-experimental.4 to 2.0.3-image-component-experimental.5

dist/index.d.ts

		export * from 'ronin';
		export { default } from 'ronin';
		import * as react_jsx_runtime from 'react/jsx-runtime';
		import { ReactHTML, ReactNode, ImgHTMLAttributes } from 'react';
		import { ReactHTML, ReactNode } from 'react';
		import { StoredObject } from 'ronin/types';
		@@ -49,9 +49,43 @@
		interface ImageProps {
		alt?: ImgHTMLAttributes<HTMLImageElement>["alt"];
		/**
		* Defines text that can replace the image in the page.
		*/
		alt?: string;
		/**
		* The quality level at which the image should be displayed. A lower quality
		* ensures a faster loading speed, but might also effect the visual
		* appearance, so it is essential to choose carefully.
		*
		* Must be an integer between 0 and 100.
		*/
		quality?: number;
		/**
		* The value of a RONIN Blob field.
		*/
		src: string \| StoredObject;
		/**
		* The intrinsic size of the image in pixels, if its width and height are the
		* same. Must be an integer without a unit.
		*/
		size?: number;
		/**
		* The intrinsic width of the image in pixels. Must be an integer without a
		* unit.
		*/
		width?: number;
		/**
		* The intrinsic height of the image, in pixels. Must be an integer without
		* a unit.
		*/
		height?: number;
		loading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
		/**
		* Indicates how the browser should load the image.
		*
		* Providing the value "lazy" defers loading the image until it reaches a
		* calculated distance from the viewport, as defined by the browser. The
		* intent is to avoid the network and storage bandwidth needed to handle the
		* image until it's reasonably certain that it will be needed. This generally
		* improves the performance of the content in most typical use cases.
		*/
		loading?: "lazy";
		}
		@@ -58,0 +92,0 @@ declare const Image: ({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, quality, loading, }: ImageProps) => react_jsx_runtime.JSX.Element;

dist/index.js

		@@ -101,3 +101,3 @@ Object.defineProperty(exports, '__esModule', { value: true });
		const imageRef = react.useRef(null);
		const init = react.useRef(Date.now());
		const renderTime = react.useRef(Date.now());
		const isMediaObject = typeof input === "object" && input !== null;
		@@ -131,3 +131,3 @@ const width = defaultSize \|\| defaultWidth;
		const onLoad = ()=>{
		const duration = Date.now() - init.current;
		const duration = Date.now() - renderTime.current;
		const threshold = 150;
		@@ -134,0 +134,0 @@ // Fade in and gradually reduce blur of the real image if loading takes

package.json

		{
		"name": "react-ronin",
		"version": "2.0.3-image-component-experimental.4",
		"version": "2.0.3-image-component-experimental.5",
		"license": "Apache-2.0",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

dist/index.mjs

Sorry, the diff of this file is not supported yet

react-ronin - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics