react-ronin - npm Package Compare versions

dist/components/image.client.d.ts

		@@ -15,5 +15,13 @@ /// <reference types="web" />
		* Must be an integer between 0 and 100.
		*
		* @default 80
		*/
		quality?: number;
		/**
		* The format of the image.
		*
		* @default "webp"
		*/
		format?: "webp" \| "jpeg" \| "png" \| "original";
		/**
		* The value of a RONIN Blob field.
		@@ -39,2 +47,4 @@ */
		* Specifies how the image should be resized to fit its container.
		*
		* @default "cover"
		*/
		@@ -41,0 +51,0 @@ fit?: CSSProperties["objectFit"];

dist/components/image.client.js

		"use client";
		import React, { useCallback, useRef, forwardRef, } from "react";
		const supportedFitValues = ["fill", "contain", "cover"];
		const Image = forwardRef(({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, fit = "cover", aspect, quality, loading, style, className, }, ref) => {
		const Image = forwardRef(({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, fit = "cover", format = "webp", quality = 80, aspect, loading, style, className, }, ref) => {
		const imageElement = useRef(null);
		@@ -32,4 +32,5 @@ const renderTime = useRef(Date.now());
		...(height ? { h: height.toString() } : {}),
		...(format !== "original" ? { fm: format } : {}),
		fit: supportedFitValues.includes(fit) ? fit : "cover",
		q: quality ? quality.toString() : "100",
		q: quality.toString(),
		});
		@@ -39,4 +40,5 @@ const responsiveOptimizationParams = new URLSearchParams({
		...(height ? { h: (height * 2).toString() } : {}),
		...(format !== "original" ? { fm: format } : {}),
		fit: supportedFitValues.includes(fit) ? fit : "cover",
		q: quality ? quality.toString() : "100",
		q: quality.toString(),
		});
		@@ -43,0 +45,0 @@ const source = isMediaObject ? `${input.src}?${optimizationParams}` : input;

package.json

		{
		"name": "react-ronin",
		"version": "2.2.7",
		"version": "2.2.8-add-format-experimental.0",
		"license": "Apache-2.0",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts