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.2.6 to 1.3.0
| import React from "react"; | ||
| import "intersection-observer"; | ||
| export declare type ResponsiveImageType = { | ||
| /** The aspect ratio (width/height) of the image */ | ||
| aspectRatio: number; | ||
| base64?: string | null; | ||
| height?: number | null; | ||
| /** A base64-encoded thumbnail to offer during image loading */ | ||
| base64?: string; | ||
| /** The height of the image */ | ||
| height?: number; | ||
| /** The width of the image */ | ||
| width: number; | ||
| sizes?: string | null; | ||
| src?: string | null; | ||
| srcSet?: string | null; | ||
| webpSrcSet?: string | null; | ||
| bgColor?: string | null; | ||
| alt?: string | null; | ||
| title?: string | null; | ||
| /** The HTML5 `sizes` attribute for the image */ | ||
| sizes?: string; | ||
| /** The fallback `src` attribute for the image */ | ||
| src?: string; | ||
| /** The HTML5 `srcSet` attribute for the image */ | ||
| srcSet?: string; | ||
| /** The HTML5 `srcSet` attribute for the image in WebP format, for browsers that support the format */ | ||
| webpSrcSet?: string; | ||
| /** The background color for the image placeholder */ | ||
| bgColor?: string; | ||
| /** Alternate text (`alt`) for the image */ | ||
| alt?: string; | ||
| /** Title attribute (`title`) for the image */ | ||
| title?: string; | ||
| }; | ||
| declare type ImagePropTypes = { | ||
| /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */ | ||
| data: ResponsiveImageType; | ||
| /** Additional CSS className for root node */ | ||
| className?: string; | ||
| /** Additional CSS class for the inner `<picture />` tag */ | ||
| pictureClassName?: string; | ||
| /** Duration (in ms) of the fade-in transition effect upoad image loading */ | ||
| fadeInDuration?: 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; | ||
| /** 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 */ | ||
| intersectionMargin?: string; | ||
| /** Wheter enable lazy loading or not */ | ||
| lazyLoad?: boolean; | ||
| /** Additional CSS rules to add to the root node */ | ||
| style?: React.CSSProperties; | ||
| /** Additional CSS rules to add to the inner `<picture />` tag */ | ||
| pictureStyle?: React.CSSProperties; | ||
| /** Wheter the image wrapper should explicitely declare the width of the image or keep it fluid */ | ||
| explicitWidth?: boolean; | ||
@@ -27,0 +48,0 @@ }; |
@@ -25,3 +25,5 @@ "use strict"; | ||
| var isSsr = typeof window === "undefined"; | ||
| var universalBtoa = isSsr ? function (str) { return Buffer.from(str.toString(), 'binary').toString('base64'); } : window.btoa; | ||
| var universalBtoa = isSsr | ||
| ? function (str) { return Buffer.from(str.toString(), "binary").toString("base64"); } | ||
| : window.btoa; | ||
| var isIntersectionObserverAvailable = isSsr | ||
@@ -86,5 +88,5 @@ ? false | ||
| var regularSource = data.srcSet && (react_1["default"].createElement("source", { srcSet: data.srcSet, sizes: data.sizes })); | ||
| var placeholder = (react_1["default"].createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : null, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: !fadeInDuration || fadeInDuration > 0 | ||
| var placeholder = (react_1["default"].createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: !fadeInDuration || fadeInDuration > 0 | ||
| ? "opacity " + (fadeInDuration || 500) + "ms " + (fadeInDuration || 500) + "ms" | ||
| : null }, absolutePositioning) })); | ||
| : undefined }, absolutePositioning) })); | ||
| var width = data.width, aspectRatio = data.aspectRatio; | ||
@@ -99,3 +101,3 @@ var height = data.height || width / aspectRatio; | ||
| ? "opacity " + (fadeInDuration || 500) + "ms" | ||
| : null }) }, | ||
| : undefined }) }, | ||
| webpSource, | ||
@@ -102,0 +104,0 @@ regularSource, |
| export * from './Image'; | ||
| export * from './Seo'; | ||
| export * from './subscribeToQuery'; | ||
| export * from './useQuerySubscription'; |
@@ -8,2 +8,4 @@ "use strict"; | ||
| __export(require("./Seo")); | ||
| __export(require("./subscribeToQuery")); | ||
| __export(require("./useQuerySubscription")); | ||
| //# sourceMappingURL=index.js.map |
| /// <reference types="react" /> | ||
| export declare type SeoMetaTagType = { | ||
| /** the tag for the meta information */ | ||
| tag: string; | ||
| /** the inner content of the meta tag */ | ||
| content: string | null; | ||
| /** the HTML attributes to attach to the meta tag */ | ||
| attributes: Record<string, string> | null; | ||
@@ -6,0 +9,0 @@ }; |
| { | ||
| "name": "react-datocms", | ||
| "version": "1.2.6", | ||
| "version": "1.3.0", | ||
| "types": "dist/index.d.ts", | ||
@@ -31,3 +31,3 @@ "main": "dist/index.js", | ||
| "rimraf": "^3.0.2", | ||
| "ts-jest": "^25.2.1", | ||
| "ts-jest": "^26.4.1", | ||
| "typescript": "^3.8.3" | ||
@@ -74,4 +74,5 @@ }, | ||
| "intersection-observer": "^0.10.0", | ||
| "react-intersection-observer": "^8.26.1" | ||
| "react-intersection-observer": "^8.26.1", | ||
| "use-deep-compare-effect": "^1.4.0" | ||
| } | ||
| } |
165
README.md
@@ -19,13 +19,21 @@ # react-datocms | ||
| - [Demos](#demos) | ||
| - [Installation](#installation) | ||
| - [Demos](#demos) | ||
| - [Installation](#installation) | ||
| - [Live real-time updates](#live-real-time-updates) | ||
| - [Reference](#reference) | ||
| - [Usage](#usage) | ||
| - [Initialization options](#initialization-options) | ||
| - [Connection status](#connection-status) | ||
| - [Error object](#error-object) | ||
| - [Example](#example) | ||
| - [Progressive/responsive image](#progressiveresponsive-image) | ||
| - [Out-of-the-box features](#out-of-the-box-features) | ||
| - [Usage](#usage) | ||
| - [Example](#example) | ||
| - [Usage](#usage-1) | ||
| - [Example](#example-1) | ||
| - [Props](#props) | ||
| - [The `ResponsiveImage` object](#the-responsiveimage-object) | ||
| - [Social share, SEO and Favicon meta tags](#social-share-seo-and-favicon-meta-tags) | ||
| - [Usage](#usage-1) | ||
| - [Example](#example-1) | ||
| - [Usage](#usage-2) | ||
| - [Example](#example-2) | ||
@@ -46,4 +54,106 @@ <!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
| ## Progressive/responsive image | ||
| # Live real-time updates | ||
| `useQuerySubscription` is a React hook that you can use to implement client-side updates of the page as soon as the content changes. It uses DatoCMS's [GraphQL server-sent events (SSE)](#) protocol to receive the updated query results in real-time, and is able to reconnect in case of network failures. | ||
| Live updates are great both to get instant previews of your content while editing it inside DatoCMS, or to offer real-time updates of content to your visitors (ie. news site). | ||
| ## Reference | ||
| ```js | ||
| const { | ||
| data: QueryResult | undefined, | ||
| error: ChannelErrorData | null, | ||
| status: ConnectionStatus, | ||
| } = useQuerySubscription(options: Options); | ||
| ``` | ||
| ## Usage | ||
| 1. Import `useQuerySubscription` from `react-datocms` and use it inside your components | ||
| 2. **Important:** Remember to set the `enabled` property, or the hook will simply return the `initialData` you pass! | ||
| ## Initialization options | ||
| | prop | type | required | description | default | | ||
| | ------------------ | ----------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------- | ------------------------------------ | | ||
| | enabled | boolean | :x: | Whether the subscription has to be performed or not | false | | ||
| | query | string | :white_check_mark: | The GraphQL query to subscribe | | | ||
| | token | string | :white_check_mark: | DatoCMS API token to use | | | ||
| | variables | Object | :x: | GraphQL variables for the query | | | ||
| | preview | boolean | :x: | If true, the Content Delivery API with draft content will be used | false | | ||
| | environment | string | :x: | The name of the DatoCMS environment where to perform the query | defaults to primary environment | | ||
| | initialData | Object | :x: | The initial data to use on the first render | | | ||
| | reconnectionPeriod | number | :x: | In case of network errors, the period to wait to reconnect | | | ||
| | fetch | a [fetch-like function](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) | :x: | The fetch function to use to perform the registration query | window.fetch | | ||
| | baseUrl | string | :x: | The base URL to use to perform the query | `https://graphql-listen.datocms.com` | | ||
| ## Connection status | ||
| The `status` property represents the state of the server-sent events connection. It can be one of the following: | ||
| - `connecting`: the subscription channel is trying to connect | ||
| - `connected`: the channel is open, we're receiving live updates | ||
| - `closed`: the channel has been permanently closed due to a fatal error (ie. an invalid query) | ||
| ## Error object | ||
| | prop | type | description | | ||
| | -------- | ------ | ------------------------------------------------------- | | ||
| | code | string | The code of the error (ie. `INVALID_QUERY`) | | ||
| | message | string | An human friendly message explaining the error | | ||
| | response | Object | The raw response returned by the endpoint, if available | | ||
| ## Example | ||
| ```js | ||
| import React from "react"; | ||
| import { useQuerySubscription } from "react-datocms"; | ||
| const App: React.FC = () => { | ||
| const { status, error, data } = useQuerySubscription({ | ||
| enabled: true, | ||
| query: ` | ||
| query AppQuery($first: IntType) { | ||
| allBlogPosts { | ||
| slug | ||
| title | ||
| } | ||
| }`, | ||
| variables: { first: 10 }, | ||
| token: "YOUR_API_TOKEN", | ||
| }); | ||
| const statusMessage = { | ||
| connecting: "Connecting to DatoCMS...", | ||
| connected: "Connected to DatoCMS, receiving live updates!", | ||
| closed: "Connection closed", | ||
| }; | ||
| return ( | ||
| <div> | ||
| <p>Connection status: {statusMessage[status]}</p> | ||
| {error && ( | ||
| <div> | ||
| <h1>Error: {error.code}</h1> | ||
| <div>{error.message}</div> | ||
| {error.response && ( | ||
| <pre>{JSON.stringify(error.response, null, 2)}</pre> | ||
| )} | ||
| </div> | ||
| )} | ||
| {data && ( | ||
| <ul> | ||
| {data.allBlogPosts.map((blogPost) => ( | ||
| <li key={blogPost.slug}>{blogPost.title}</li> | ||
| ))} | ||
| </ul> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
| # Progressive/responsive image | ||
| `<Image />` is a React component specially designed to work seamlessly with DatoCMS’s [`responsiveImage` GraphQL query](https://www.datocms.com/docs/content-delivery-api/uploads#responsive-images) that optimizes image loading for your sites. | ||
@@ -53,3 +163,3 @@ | ||
| ### Out-of-the-box features | ||
| ## Out-of-the-box features | ||
@@ -62,3 +172,3 @@ - Offer WebP version of images for browsers that support the format | ||
| ### Usage | ||
| ## Usage | ||
@@ -70,3 +180,3 @@ 1. Import `Image` from `react-datocms` and use it in place of the regular `<img />` tag | ||
| ### Example | ||
| ## Example | ||
@@ -123,18 +233,18 @@ For a fully working example take a look at our [examples directory](https://github.com/datocms/react-datocms/tree/master/examples). | ||
| ### Props | ||
| ## Props | ||
| | prop | type | default | required | description | | ||
| | -------------------- | ------------------------ | ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | data | `ResponsiveImage` object | | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query. | | ||
| | className | string | null | :x: | Additional CSS class of root node | | ||
| | style | CSS properties | null | :x: | Additional CSS rules to add to the root node | | ||
| | pictureClassName | string | null | :x: | Additional CSS class for the inner `<picture />` tag | | ||
| | pictureStyle | CSS properties | null | :x: | Additional CSS rules to add to the inner `<picture />` tag | | ||
| | fadeInDuration | integer | 500 | :x: | Duration (in ms) of the fade-in transition effect upoad image loading | | ||
| | intersectionTreshold | float | 0 | :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. | | ||
| | intersectionMargin | string | "0px 0px 0px 0px" | :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. | | ||
| | lazyLoad | Boolean | true | :x: | Wheter enable lazy loading or not | | ||
| | explicitWidth | Boolean | false | :x: | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid | | ||
| | 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 inner `<picture />` tag | null | | ||
| | pictureStyle | CSS properties | :x: | Additional CSS rules to add to 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 | | ||
| #### The `ResponsiveImage` object | ||
| ### The `ResponsiveImage` object | ||
@@ -154,2 +264,3 @@ The `data` prop expects an object with the same shape as the one returned by `responsiveImage` GraphQL call. It's up to you to make a GraphQL query that will return the properties you need for a specific use of the `<Image>` component. | ||
| | width | integer | :white_check_mark: | The width of the image | | ||
| | height | integer | :white_check_mark: | The height of the image | | ||
| | sizes | string | :white_check_mark: | The HTML5 `sizes` attribute for the image | | ||
@@ -164,7 +275,7 @@ | srcSet | string | :white_check_mark: | The HTML5 `srcSet` attribute for the image | | ||
| ## Social share, SEO and Favicon meta tags | ||
| # Social share, SEO and Favicon meta tags | ||
| Just like the image component, `renderMetaTags()` is a helper specially designed to work seamlessly with DatoCMS’s [`_seoMetaTags` and `faviconMetaTags` GraphQL queries](https://www.datocms.com/docs/content-delivery-api/seo) so that you can handle proper SEO in your pages with a simple one-liner. | ||
| ### Usage | ||
| ## Usage | ||
@@ -178,3 +289,3 @@ `renderMetaTags()` takes an array of `Tag`s in the exact form they're returned by the following [DatoCMS GraphQL API](https://www.datocms.com/docs/content-delivery-api/seo) queries: | ||
| ### Example | ||
| ## Example | ||
@@ -181,0 +292,0 @@ For a working example take a look at our [examples directory](https://github.com/datocms/react-datocms/tree/master/examples). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by75.25%
68999
- Number of package files
- increased by27.27%
28
- Lines of code
- increased by99.15%
705
- Number of lines in readme file
- increased by53.37%
319
Worsened metrics
- Dependency count
- increased by33.33%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
2
Dependency changes
+ Added@babel/runtime@7.26.7(transitive)
+ Addeddequal@2.0.3(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)
+ Addeduse-deep-compare-effect@1.8.1(transitive)