New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-datocms
Advanced tools
react-datocms - npm Package Compare versions
Comparing version 1.5.3 to 1.5.4
@@ -36,4 +36,6 @@ import React from "react"; | ||
| fadeInDuration?: number; | ||
| /** @deprecated Use the intersectionThreshold prop */ | ||
| intersectionTreshold?: number; | ||
| /** Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible */ | ||
| intersectionTreshold?: number; | ||
| intersectionThreshold?: number; | ||
| /** Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections */ | ||
@@ -40,0 +42,0 @@ intersectionMargin?: string; |
@@ -71,3 +71,3 @@ "use strict"; | ||
| var Image = function (_a) { | ||
| var className = _a.className, fadeInDuration = _a.fadeInDuration, intersectionTreshold = _a.intersectionTreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _b = _a.lazyLoad, lazyLoad = _b === void 0 ? true : _b, style = _a.style, pictureStyle = _a.pictureStyle, explicitWidth = _a.explicitWidth, data = _a.data; | ||
| var className = _a.className, fadeInDuration = _a.fadeInDuration, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _b = _a.lazyLoad, lazyLoad = _b === void 0 ? true : _b, style = _a.style, pictureStyle = _a.pictureStyle, explicitWidth = _a.explicitWidth, data = _a.data; | ||
| var _c = react_1.useState(false), loaded = _c[0], setLoaded = _c[1]; | ||
@@ -78,3 +78,3 @@ var handleLoad = react_1.useCallback(function () { | ||
| var _d = react_intersection_observer_1.useInView({ | ||
| threshold: intersectionTreshold || 0, | ||
| threshold: intersectionThreshold || intersectionTreshold || 0, | ||
| rootMargin: intersectionMargin || "0px 0px 0px 0px", | ||
@@ -81,0 +81,0 @@ triggerOnce: true |
| { | ||
| "name": "react-datocms", | ||
| "version": "1.5.3", | ||
| "version": "1.5.4", | ||
| "types": "dist/index.d.ts", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -233,14 +233,14 @@ # react-datocms | ||
| | prop | type | required | description | default | | ||
| | -------------------- | ------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | ||
| | data | `ResponsiveImage` object | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query. | | | ||
| | className | string | :x: | Additional CSS className for root node | null | | ||
| | style | CSS properties | :x: | Additional CSS rules to add to the root node | null | | ||
| | pictureClassName | string | :x: | Additional CSS class for the image inside the inner `<picture />` tag | null | | ||
| | pictureStyle | CSS properties | :x: | Additional CSS rules to add to the image inside the inner `<picture />` tag | null | | ||
| | fadeInDuration | integer | :x: | Duration (in ms) of the fade-in transition effect upoad image loading | 500 | | ||
| | intersectionTreshold | float | :x: | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. | 0 | | ||
| | intersectionMargin | string | :x: | Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections. | "0px 0px 0px 0px" | | ||
| | lazyLoad | Boolean | :x: | Wheter enable lazy loading or not | true | | ||
| | explicitWidth | Boolean | :x: | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid | false | | ||
| | prop | type | required | description | default | | ||
| | --------------------- | ------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | ||
| | data | `ResponsiveImage` object | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query. | | | ||
| | className | string | :x: | Additional CSS className for root node | null | | ||
| | style | CSS properties | :x: | Additional CSS rules to add to the root node | null | | ||
| | pictureClassName | string | :x: | Additional CSS class for the image inside the inner `<picture />` tag | null | | ||
| | pictureStyle | CSS properties | :x: | Additional CSS rules to add to the image inside the inner `<picture />` tag | null | | ||
| | fadeInDuration | integer | :x: | Duration (in ms) of the fade-in transition effect upoad image loading | 500 | | ||
| | intersectionThreshold | float | :x: | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. | 0 | | ||
| | intersectionMargin | string | :x: | Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections. | "0px 0px 0px 0px" | | ||
| | lazyLoad | Boolean | :x: | Wheter enable lazy loading or not | true | | ||
| | explicitWidth | Boolean | :x: | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid | false | | ||
@@ -472,3 +472,7 @@ ### The `ResponsiveImage` object | ||
| case "TeamMemberRecord": | ||
| return <a {...transformedMeta} href={`/team/${record.slug}`}>{children}</a>; | ||
| return ( | ||
| <a {...transformedMeta} href={`/team/${record.slug}`}> | ||
| {children} | ||
| </a> | ||
| ); | ||
| default: | ||
@@ -475,0 +479,0 @@ return null; |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.3%
93698
- Lines of code
- increased by0.22%
909
- Number of lines in readme file
- increased by0.74%
543
No dependency changes