caravaggio-react - npm Package Compare versions

Comparing version 0.3.9 to 0.4.0

CHANGELOG.md

 # caravaggio-react
 
+## 0.4.0
+
+  - Add explanation of parameters
+  - `opt` is optional in Image component. If not passed, no transformation is applied and it behaves
+    like a normal `img` tag.
+  - Image accepts ref
+  - All types correctly exported
+
+
 ## 0.3.9
 
   - Image url is correctly escaped

dist/CaravaggioProvider.d.ts

 import React from 'react';
-interface CaravaggioProviderProps {
+export interface CaravaggioProviderProps {
     url: string;
@@ -11,3 +11,2 @@ baseUrl?: string;
 export declare const CaravaggioContext: React.Context<CaravaggioContext | null>;
-declare const CaravaggioProvider: React.SFC<CaravaggioProviderProps>;
-export default CaravaggioProvider;
+export declare const CaravaggioProvider: React.SFC<CaravaggioProviderProps>;

dist/Image.d.ts

 import React from 'react';
 import { CaravaggioOptions } from './urlBuilder';
-interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    opt: CaravaggioOptions;
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    opt?: CaravaggioOptions;
 }
-declare const _default: React.NamedExoticComponent<ImageProps>;
-export default _default;
+export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;

dist/ImageSet.d.ts

 import React from 'react';
 import { CaravaggioOptions } from './urlBuilder';
-interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+export interface ImageSetProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     sets: Array<{
@@ -14,3 +14,2 @@ type?: string;
 }
-declare const ImageSet: React.SFC<ImageProps>;
-export default ImageSet;
+export declare const ImageSet: React.FC<ImageSetProps>;

dist/index.cjs.js

@@ -109,2 +109,3 @@ 'use strict';
     var caravaggioUrl = _a.url, baseUrl = _a.baseUrl;
+    if (opt === void 0) { opt = {}; }
     var options = Object.entries(opt)
@@ -126,3 +127,5 @@ .map(function (_a) {
     var finalImageUrl = /^\.?\//.test(imageUrl) && baseUrl ? "" + baseUrl + imageUrl : imageUrl;
-    return caravaggioUrl + "/" + options + "?image=" + encodeURIComponent(finalImageUrl);
+    return options
+        ? caravaggioUrl + "/" + options + "?image=" + encodeURIComponent(finalImageUrl)
+        : finalImageUrl;
 };
@@ -135,8 +138,8 @@
 
-var Image = function (_a) {
+var Image = React__default.forwardRef(function (_a, ref) {
     var opt = _a.opt, src = _a.src, otherProps = __rest(_a, ["opt", "src"]);
     var url = useCaravaggioImage(src, opt);
-    return React__default.createElement("img", __assign({ src: url }, otherProps));
-};
-var Image$1 = React__default.memo(Image);
+    return React__default.createElement("img", __assign({ src: url }, otherProps, { ref: ref }));
+});
+Image.displayName = 'Image';
 
@@ -160,5 +163,6 @@ var ImageSet = function (_a) {
 
+exports.CaravaggioContext = CaravaggioContext;
 exports.CaravaggioProvider = CaravaggioProvider;
-exports.Image = Image$1;
+exports.Image = Image;
 exports.ImageSet = ImageSet;
 exports.useCaravaggioImage = useCaravaggioImage;

dist/index.d.ts

@@ -1,5 +0,4 @@
-import Image from './Image';
-import useCaravaggioImage from './useCaravaggioImage';
-import CaravaggioProvider from './CaravaggioProvider';
-import ImageSet from './ImageSet';
-export { CaravaggioProvider, useCaravaggioImage, Image, ImageSet };
+export * from './Image';
+export * from './ImageSet';
+export * from './useCaravaggioImage';
+export * from './CaravaggioProvider';

dist/index.esm.js

@@ -102,2 +102,3 @@ import React, { useContext } from 'react';
     var caravaggioUrl = _a.url, baseUrl = _a.baseUrl;
+    if (opt === void 0) { opt = {}; }
     var options = Object.entries(opt)
@@ -119,3 +120,5 @@ .map(function (_a) {
     var finalImageUrl = /^\.?\//.test(imageUrl) && baseUrl ? "" + baseUrl + imageUrl : imageUrl;
-    return caravaggioUrl + "/" + options + "?image=" + encodeURIComponent(finalImageUrl);
+    return options
+        ? caravaggioUrl + "/" + options + "?image=" + encodeURIComponent(finalImageUrl)
+        : finalImageUrl;
 };
@@ -128,8 +131,8 @@
 
-var Image = function (_a) {
+var Image = React.forwardRef(function (_a, ref) {
     var opt = _a.opt, src = _a.src, otherProps = __rest(_a, ["opt", "src"]);
     var url = useCaravaggioImage(src, opt);
-    return React.createElement("img", __assign({ src: url }, otherProps));
-};
-var Image$1 = React.memo(Image);
+    return React.createElement("img", __assign({ src: url }, otherProps, { ref: ref }));
+});
+Image.displayName = 'Image';
 
@@ -153,2 +156,2 @@ var ImageSet = function (_a) {
 
-export { CaravaggioProvider, Image$1 as Image, ImageSet, useCaravaggioImage };
+export { CaravaggioContext, CaravaggioProvider, Image, ImageSet, useCaravaggioImage };

dist/urlBuilder.d.ts

@@ -44,40 +44,170 @@ import { CaravaggioContext } from './CaravaggioProvider';
 }
-declare type GRAVITY_KEYS = keyof typeof GRAVITY;
+export declare type GRAVITY_KEYS = keyof typeof GRAVITY;
 export interface CaravaggioOptions {
     o?: 'auto' | 'original' | 'jpg' | 'jpeg' | 'png' | 'tiff' | 'webp';
     progressive?: boolean;
+    /**
+     * Resize the image to the given dimension
+     * @see https://caravaggio.ramielcreations.com/docs/resize
+     */
     rs?: {
+        /**
+         * The desired dimension in the format WIDTHxHEIGHT
+         * @example
+         *  `1080x1024`
+         *  `1080x`
+         *  `x1024`
+         *  `0.8x0.6` (percentages)
+         * @see https://caravaggio.ramielcreations.com/docs/resize#sizes
+         */
         s: string;
+        /**
+         * The resize method. For in depth explanation
+         * @see https://caravaggio.ramielcreations.com/docs/resize#resize-methods
+         */
         m?: 'scale' | 'fit' | 'downfit' | 'upfit' | 'fill' | 'downfill' | 'embed';
+        /**
+         * Ignore aspect ratio. If true the aspect ratio of the image is not kept and the image
+         * is allowed to be distorted. It works with method `scale`
+         */
         iar?: boolean;
+        /**
+         * Background color. With some resize methods an empty space can be left and you can use this value
+         * to fill it with a color.
+         *
+         * @example
+         * `b: '120230007'` is for rgb(120, 230, 7)
+         * `b: 120230007.4` same as before but with an opacity, rgba(120, 230, 7, 0.4)
+         * `b: 'FF00AB'` is for exadecimal color
+         * `b: 'FF00AB.4'` same as before but with an opacity of 0.4
+         *
+         * @see https://caravaggio.ramielcreations.com/docs/resize#colors
+         */
         b?: string;
+        /**
+         * Define the gravity of the image. If an empty space is left, this let you decide where to put the image
+         *
+         * @see https://caravaggio.ramielcreations.com/docs/resize#gravity
+         */
         g?: GRAVITY_KEYS;
     };
+    /**
+     * Extracy a portion of the image
+     * @see https://caravaggio.ramielcreations.com/docs/extract
+     */
     ex?: {
+        /**
+         * Pixel from the left
+         */
         x: number;
+        /**
+         * Pixel from the top
+         */
         y: number;
+        /**
+         * Width of the extracted area
+         */
         w: number;
+        /**
+         * Height of the extracted area
+         */
         h: number;
     };
+    /**
+     * Add an overlay image (watermark)
+     * @see https://caravaggio.ramielcreations.com/docs/overlay
+     */
     overlay?: {
+        /**
+         * The url of the overlay image
+         */
         url: string;
+        /**
+         * The gravity of the overlay
+         *
+         * @see https://caravaggio.ramielcreations.com/docs/overlay#position-with-gravity
+         * @see https://caravaggio.ramielcreations.com/docs/resize#gravity
+         */
         g?: GRAVITY_KEYS;
+        /**
+         * Position from the left, in pixels or percentage
+         * @example
+         * `x: 130`
+         * `x: 0.6`
+         *
+         * @see https://caravaggio.ramielcreations.com/docs/overlay#positioning-with-coordinates
+         */
         x?: number;
+        /**
+         * Position from the top, in pixels or percentage
+         * @example
+         * `y: 130`
+         * `y: 0.6`
+         *
+         * @see https://caravaggio.ramielcreations.com/docs/overlay#positioning-with-coordinates
+         */
         y?: number;
+        /**
+         * If true, the overlay is repeated
+         * @see https://caravaggio.ramielcreations.com/docs/overlay#watermark-repeat
+         */
         watermark?: boolean;
     };
+    /**
+     * Set the quality of the final image
+     * @see https://caravaggio.ramielcreations.com/docs/quality
+     */
     q?: number;
+    /**
+     * Rotate the image arbitrarly
+     * @see https://caravaggio.ramielcreations.com/docs/rotate
+     */
     rotate?: {
+        /**
+         * Value, in degree, of the rotation angle
+         */
         v: number;
+        /**
+         * If the rotation is not multiple of 90°, this defines the background color
+         * of the resulting area.
+         *
+         * @example
+         * `b: '120230007'` is for rgb(120, 230, 7)
+         * `b: 120230007.4` same as before but with an opacity, rgba(120, 230, 7, 0.4)
+         * `b: 'FF00AB'` is for exadecimal color
+         * `b: 'FF00AB.4'` same as before but with an opacity of 0.4
+         *
+         * @see https://caravaggio.ramielcreations.com/docs/resize#colors
+         */
         b?: string;
     };
+    /**
+     * Flip the image. Set `x` to flip horzontally, or `y` to flip vertically
+     * @see https://caravaggio.ramielcreations.com/docs/flip
+     */
     flip?: 'x' | 'y';
+    /**
+     * Blur the image
+     * @see https://caravaggio.ramielcreations.com/docs/blur
+     */
     blur?: number;
+    /**
+     * Apply a duotone effect to the image
+     * @see https://caravaggio.ramielcreations.com/docs/duotone
+     */
     duotone?: {
+        /**
+         * Highlight color
+         */
         h: string;
+        /**
+         * Shadow color
+         */
         s: string;
+        /**
+         * Opacity
+         */
         o?: number;
     };
 }
-declare const urlBuilder: ({ url: caravaggioUrl, baseUrl }: CaravaggioContext, imageUrl: string, opt: CaravaggioOptions) => string;
-export default urlBuilder;
+export declare const urlBuilder: ({ url: caravaggioUrl, baseUrl }: CaravaggioContext, imageUrl: string, opt?: CaravaggioOptions) => string;

dist/useCaravaggioImage.d.ts

 import { CaravaggioOptions } from './urlBuilder';
-declare const useCaravaggioImage: (imageUrl: string, opt: CaravaggioOptions) => string;
-export default useCaravaggioImage;
+export declare const useCaravaggioImage: (imageUrl: string, opt?: CaravaggioOptions | undefined) => string;

package.json

 {
   "name": "caravaggio-react",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "Caravaggio react library",
@@ -30,2 +30,4 @@ "main": "dist/index.cjs.js",
     "prettier": "^2.0.5",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
@@ -40,4 +42,5 @@ "rollup": "^2.21.0",
   "peerDependencies": {
-    "react": "16.x"
+    "react": ">=16",
+    "react-dom": ">=16"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

27747

increased by21.32%

Lines of code

542

increased by32.2%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

14

increased by16.67%

No dependency changes