caravaggio-react - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

 # caravaggio-react
 
+## 1.2.1
+  - Improve README
+
 ## 1.2.0
@@ -4,0 +7,0 @@ - Can pass undefinied image to the hook, producing an undefined result

dist/index.cjs.js

@@ -5,7 +5,8 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 /*! *****************************************************************************
@@ -49,6 +50,6 @@ Copyright (c) Microsoft Corporation.
 
-var CaravaggioContext = React__default.createContext(null);
+var CaravaggioContext = React__default['default'].createContext(null);
 var CaravaggioProvider = function (_a) {
     var children = _a.children, url = _a.url, baseUrl = _a.baseUrl;
-    return (React__default.createElement(CaravaggioContext.Provider, { value: { url: url, baseUrl: baseUrl } }, children));
+    return (React__default['default'].createElement(CaravaggioContext.Provider, { value: { url: url, baseUrl: baseUrl } }, children));
 };
@@ -177,6 +178,6 @@
 
-var Image = React__default.forwardRef(function (_a, ref) {
+var Image = React__default['default'].forwardRef(function (_a, ref) {
     var opt = _a.opt, src = _a.src, otherProps = __rest(_a, ["opt", "src"]);
     var url = useCaravaggio(src, opt);
-    return React__default.createElement("img", __assign({ src: url }, otherProps, { ref: ref }));
+    return React__default['default'].createElement("img", __assign({ src: url }, otherProps, { ref: ref }));
 });
@@ -195,7 +196,7 @@ Image.displayName = 'Image';
             .join(',');
-        return (React__default.createElement("source", { type: set.type, srcSet: srcSet, key: otherProps.src + "-set-" + i }));
+        return (React__default['default'].createElement("source", { type: set.type, srcSet: srcSet, key: otherProps.src + "-set-" + i }));
     });
-    return (React__default.createElement("picture", null,
+    return (React__default['default'].createElement("picture", null,
         sources,
-        React__default.createElement("img", __assign({}, otherProps))));
+        React__default['default'].createElement("img", __assign({}, otherProps))));
 };
@@ -202,0 +203,0 @@

package.json

 {
   "name": "caravaggio-react",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Caravaggio react library",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

README.md

@@ -162,11 +162,13 @@ # caravaggio-react
 
-## Hook
+## Hooks
 
-A hook, `useCaravaggioImage`, is provided to get, instead of an image tag, an image url with all the transformation applied. Very useful to insert images in css, or for css-in-js libraries
+### useCaravaggio
 
+A hook, `useCaravaggio`, is provided to get, instead of an image tag, an image url with all the transformation applied. Very useful to insert images in css, or for css-in-js libraries
+
 ```tsx
-import { useCaravaggioImage } from "caravaggio-react";
+import { useCaravaggio } from "caravaggio-react";
 
 const Component = () => {
-  const image = useCaravaggioImage("https://img.com/landscape.png", {
+  const image = useCaravaggio("https://img.com/landscape.png", {
     blur: 0.3,
@@ -181,4 +183,57 @@ });
 
+### useCaravaggioIfAvailable
+
+Sometimes you may not be sure if Caravaggio is available or not. This hook behaves exactly as `useCaravaggio` but
+is less sensible to problems: if Caravaggio provider is not available or the image is not defined, it returns a sensible default:
+
+```tsx
+import { useCaravaggioIfAvailable } from "caravaggio-react";
+
+const Component = ({image}: {image?: string}) => {
+  const image = useCaravaggioIfAvailable(image, {
+    blur: 0.3,
+  });
+
+  // If the image is not available returns null.
+  // If the provider is not available, returns the original image url
+
+  return <div style={{ backgroundImage: `url('${image}')` }}>Some content</div>;
+};
+```
+
+### useCaravaggioBuilder
+
+This hook return a function that can be invoked later to produce the image url
+
+```tsx
+import { useCaravaggioIfAvailable } from "caravaggio-react";
+
+const Component = ({image}: {image?: string}) => {
+  const builder = useCaravaggioBuilder();
+  const animals = [
+    {
+      name: 'tiger',
+      image: 'https://images.com/tiger.png'
+    },
+    {
+      name: 'monkey',
+      image: 'https://images.com/monkey.png'
+    },
+    {
+      name: 'horse',
+      image: 'https://images.com/horse.png'
+    }
+  ]
+
+  // If the image is not available returns null.
+  // If the provider is not available, returns the original image url
+
+  return <div>{
+    animals.map(animal => <img src={builder(animal.image, {o: 'jpg'})} key={animal.name} />)
+  }</div>;
+};
+```
+
 ## Available options
 
 To know about all the options, check [Caravaggio documentation](https://caravaggio.ramielcreations.com).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33812

increased by4.91%

Number of lines in readme file

238

increased by30.05%

No dependency changes