react-datocms 1.6.3 → 1.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -22
- package/dist/cjs/Image/index.js +6 -5
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/esm/Image/index.js +6 -5
- package/dist/esm/Image/index.js.map +1 -1
- package/package.json +2 -2
- package/CHANGELOG.md +0 -38
package/README.md
CHANGED
|
@@ -4,13 +4,19 @@
|
|
|
4
4
|
|
|
5
5
|
A set of components and utilities to work faster with [DatoCMS](https://www.datocms.com/) in React environments. Integrates seamlessy with DatoCMS's [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) and [Real-time Updates API](https://www.datocms.com/docs/real-time-updates-api).
|
|
6
6
|
|
|
7
|
+
<br /><br />
|
|
8
|
+
<a href="https://www.datocms.com/">
|
|
9
|
+
<img src="https://www.datocms.com/images/full_logo.svg" height="60">
|
|
10
|
+
</a>
|
|
11
|
+
<br /><br />
|
|
12
|
+
|
|
7
13
|
## Table of Contents
|
|
8
14
|
|
|
9
15
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
10
16
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
11
17
|
|
|
12
|
-
|
|
13
|
-
|
|
18
|
+
- [Demos](#demos)
|
|
19
|
+
- [Installation](#installation)
|
|
14
20
|
- [Live real-time updates](#live-real-time-updates)
|
|
15
21
|
- [Reference](#reference)
|
|
16
22
|
- [Initialization options](#initialization-options)
|
|
@@ -28,7 +34,8 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
|
|
|
28
34
|
- [Example](#example-2)
|
|
29
35
|
- [Structured text](#structured-text)
|
|
30
36
|
- [Basic usage](#basic-usage)
|
|
31
|
-
- [Custom renderers](#custom-renderers)
|
|
37
|
+
- [Custom renderers for inline records, blocks, and links](#custom-renderers-for-inline-records-blocks-and-links)
|
|
38
|
+
- [Override default text rendering](#override-default-rendering-of-nodes)
|
|
32
39
|
- [Props](#props-1)
|
|
33
40
|
|
|
34
41
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
@@ -101,8 +108,8 @@ The `status` property represents the state of the server-sent events connection.
|
|
|
101
108
|
## Example
|
|
102
109
|
|
|
103
110
|
```js
|
|
104
|
-
import React from
|
|
105
|
-
import { useQuerySubscription } from
|
|
111
|
+
import React from 'react';
|
|
112
|
+
import { useQuerySubscription } from 'react-datocms';
|
|
106
113
|
|
|
107
114
|
const App: React.FC = () => {
|
|
108
115
|
const { status, error, data } = useQuerySubscription({
|
|
@@ -115,13 +122,13 @@ const App: React.FC = () => {
|
|
|
115
122
|
}
|
|
116
123
|
}`,
|
|
117
124
|
variables: { first: 10 },
|
|
118
|
-
token:
|
|
125
|
+
token: 'YOUR_API_TOKEN',
|
|
119
126
|
});
|
|
120
127
|
|
|
121
128
|
const statusMessage = {
|
|
122
|
-
connecting:
|
|
123
|
-
connected:
|
|
124
|
-
closed:
|
|
129
|
+
connecting: 'Connecting to DatoCMS...',
|
|
130
|
+
connected: 'Connected to DatoCMS, receiving live updates!',
|
|
131
|
+
closed: 'Connection closed',
|
|
125
132
|
};
|
|
126
133
|
|
|
127
134
|
return (
|
|
@@ -181,8 +188,8 @@ The GraphQL query returns multiple thumbnails with optimized compression. The `I
|
|
|
181
188
|
For a fully working example take a look at our [examples directory](https://github.com/datocms/react-datocms/tree/master/examples).
|
|
182
189
|
|
|
183
190
|
```js
|
|
184
|
-
import React from
|
|
185
|
-
import { Image } from
|
|
191
|
+
import React from 'react';
|
|
192
|
+
import { Image } from 'react-datocms';
|
|
186
193
|
|
|
187
194
|
const Page = ({ data }) => (
|
|
188
195
|
<div>
|
|
@@ -291,8 +298,8 @@ You can `concat` multiple array of `Tag`s together and pass them to a single `re
|
|
|
291
298
|
For a working example take a look at our [examples directory](https://github.com/datocms/react-datocms/tree/master/examples).
|
|
292
299
|
|
|
293
300
|
```js
|
|
294
|
-
import React from
|
|
295
|
-
import { renderMetaTags } from
|
|
301
|
+
import React from 'react';
|
|
302
|
+
import { renderMetaTags } from 'react-datocms';
|
|
296
303
|
|
|
297
304
|
const Page = ({ data }) => (
|
|
298
305
|
<div>
|
|
@@ -332,8 +339,8 @@ export default withQuery(query)(Page);
|
|
|
332
339
|
## Basic usage
|
|
333
340
|
|
|
334
341
|
```js
|
|
335
|
-
import React from
|
|
336
|
-
import { StructuredText } from
|
|
342
|
+
import React from 'react';
|
|
343
|
+
import { StructuredText } from 'react-datocms';
|
|
337
344
|
|
|
338
345
|
const Page = ({ data }) => {
|
|
339
346
|
// data.blogPost.content ->
|
|
@@ -386,13 +393,13 @@ const query = gql`
|
|
|
386
393
|
export default withQuery(query)(Page);
|
|
387
394
|
```
|
|
388
395
|
|
|
389
|
-
## Custom renderers
|
|
396
|
+
## Custom renderers for inline records, blocks, and links
|
|
390
397
|
|
|
391
398
|
You can also pass custom renderers for special nodes (inline records, record links and blocks) as an optional parameter like so:
|
|
392
399
|
|
|
393
400
|
```js
|
|
394
|
-
import React from
|
|
395
|
-
import { StructuredText, Image } from
|
|
401
|
+
import React from 'react';
|
|
402
|
+
import { StructuredText, Image } from 'react-datocms';
|
|
396
403
|
|
|
397
404
|
const Page = ({ data }) => {
|
|
398
405
|
// data.blogPost.content ->
|
|
@@ -458,7 +465,7 @@ const Page = ({ data }) => {
|
|
|
458
465
|
data={data.blogPost.content}
|
|
459
466
|
renderInlineRecord={({ record }) => {
|
|
460
467
|
switch (record.__typename) {
|
|
461
|
-
case
|
|
468
|
+
case 'TeamMemberRecord':
|
|
462
469
|
return <a href={`/team/${record.slug}`}>{record.firstName}</a>;
|
|
463
470
|
default:
|
|
464
471
|
return null;
|
|
@@ -466,7 +473,7 @@ const Page = ({ data }) => {
|
|
|
466
473
|
}}
|
|
467
474
|
renderLinkToRecord={({ record, children, transformedMeta }) => {
|
|
468
475
|
switch (record.__typename) {
|
|
469
|
-
case
|
|
476
|
+
case 'TeamMemberRecord':
|
|
470
477
|
return (
|
|
471
478
|
<a {...transformedMeta} href={`/team/${record.slug}`}>
|
|
472
479
|
{children}
|
|
@@ -478,7 +485,7 @@ const Page = ({ data }) => {
|
|
|
478
485
|
}}
|
|
479
486
|
renderBlock={({ record }) => {
|
|
480
487
|
switch (record.__typename) {
|
|
481
|
-
case
|
|
488
|
+
case 'ImageRecord':
|
|
482
489
|
return <Image data={record.image.responsiveImage} />;
|
|
483
490
|
default:
|
|
484
491
|
return null;
|
|
@@ -515,7 +522,9 @@ const query = gql`
|
|
|
515
522
|
... on ImageRecord {
|
|
516
523
|
id
|
|
517
524
|
image {
|
|
518
|
-
responsiveImage(
|
|
525
|
+
responsiveImage(
|
|
526
|
+
imgixParams: { fit: crop, w: 300, h: 300, auto: format }
|
|
527
|
+
) {
|
|
519
528
|
srcSet
|
|
520
529
|
webpSrcSet
|
|
521
530
|
sizes
|
|
@@ -538,6 +547,82 @@ const query = gql`
|
|
|
538
547
|
export default withQuery(query)(Page);
|
|
539
548
|
```
|
|
540
549
|
|
|
550
|
+
## Override default rendering of nodes
|
|
551
|
+
|
|
552
|
+
This component automatically renders all nodes except for `inline_item`, `item_link` and `block` using a set of default rules, but you might want to customize those. For example:
|
|
553
|
+
|
|
554
|
+
For example:
|
|
555
|
+
|
|
556
|
+
- For `heading` nodes, you might want to add an anchor;
|
|
557
|
+
- For `code` nodes, you might want to use a custom sytax highlighting component like [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer);
|
|
558
|
+
- Apply different logic/formatting to a node based on what its parent node is (using the `ancestors` parameter)
|
|
559
|
+
|
|
560
|
+
- For all possible node types, refer to the [list of typeguard functions defined in the main `structured-text` package](https://github.com/datocms/structured-text/tree/main/packages/utils#typescript-type-guards). The [DAST format documentation](https://www.datocms.com/docs/structured-text/dast) has additional details.
|
|
561
|
+
|
|
562
|
+
In this case, you can easily override default rendering rules with the `customRules` prop.
|
|
563
|
+
|
|
564
|
+
```jsx
|
|
565
|
+
import { renderRule, StructuredText } from 'react-datocms';
|
|
566
|
+
import { isHeading, isCode } from 'datocms-structured-text-utils';
|
|
567
|
+
import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
|
|
568
|
+
import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
569
|
+
|
|
570
|
+
<StructuredText
|
|
571
|
+
data={data.blogPost.content}
|
|
572
|
+
customRules={[
|
|
573
|
+
|
|
574
|
+
// Add HTML anchors to heading levels for in-page navigation
|
|
575
|
+
renderRule(isHeading, ({ node, children, key }) => {
|
|
576
|
+
const HeadingTag = `h${node.level}`;
|
|
577
|
+
const anchor = toPlainText(node)
|
|
578
|
+
.toLowerCase()
|
|
579
|
+
.replace(/ /g, '-')
|
|
580
|
+
.replace(/[^\w-]+/g, '');
|
|
581
|
+
|
|
582
|
+
return (
|
|
583
|
+
<HeadingTag key={key}>
|
|
584
|
+
{children} <a id={anchor} />
|
|
585
|
+
<a href={`#${anchor}`} />
|
|
586
|
+
</HeadingTag>
|
|
587
|
+
);
|
|
588
|
+
}),
|
|
589
|
+
|
|
590
|
+
// Use a custom syntax highlighter component for code blocks
|
|
591
|
+
renderRule(isCode, ({ node, key }) => {
|
|
592
|
+
return (
|
|
593
|
+
<SyntaxHighlight
|
|
594
|
+
key={key}
|
|
595
|
+
code={node.code}
|
|
596
|
+
language={node.language}
|
|
597
|
+
linesToBeHighlighted={node.highlight}
|
|
598
|
+
/>
|
|
599
|
+
);
|
|
600
|
+
}),
|
|
601
|
+
|
|
602
|
+
// Apply different formatting to top-level paragraphs
|
|
603
|
+
renderRule(
|
|
604
|
+
isParagraph,
|
|
605
|
+
({ adapter: { renderNode }, node, children, key, ancestors }) => {
|
|
606
|
+
if (isRoot(ancestors[0])) {
|
|
607
|
+
// If this paragraph node is a top-level one, give it a special class
|
|
608
|
+
return renderNode('p', { key, className: 'top-level-paragraph-container-example' }, children);
|
|
609
|
+
} else {
|
|
610
|
+
// Proceed with default paragraph rendering...
|
|
611
|
+
// return renderNode('p', { key }, children);
|
|
612
|
+
|
|
613
|
+
// Or even completely remove the paragraph and directly render the inner children:
|
|
614
|
+
return children;
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
)
|
|
618
|
+
|
|
619
|
+
|
|
620
|
+
]}
|
|
621
|
+
/>;
|
|
622
|
+
```
|
|
623
|
+
|
|
624
|
+
Note: if you override the rules for `inline_item`, `item_link` or `block` nodes, then the `renderInlineRecord`, `renderLinkToRecord` and `renderBlock` props won't be considered!
|
|
625
|
+
|
|
541
626
|
## Props
|
|
542
627
|
|
|
543
628
|
| prop | type | required | description | default |
|
package/dist/cjs/Image/index.js
CHANGED
|
@@ -68,16 +68,17 @@ var imageShowStrategy = function (_a) {
|
|
|
68
68
|
return true;
|
|
69
69
|
};
|
|
70
70
|
var Image = function (_a) {
|
|
71
|
-
var
|
|
72
|
-
var _c =
|
|
71
|
+
var _b;
|
|
72
|
+
var className = _a.className, fadeInDuration = _a.fadeInDuration, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _c = _a.lazyLoad, lazyLoad = _c === void 0 ? true : _c, style = _a.style, pictureStyle = _a.pictureStyle, explicitWidth = _a.explicitWidth, data = _a.data;
|
|
73
|
+
var _d = react_1.useState(false), loaded = _d[0], setLoaded = _d[1];
|
|
73
74
|
var handleLoad = react_1.useCallback(function () {
|
|
74
75
|
setLoaded(true);
|
|
75
76
|
}, []);
|
|
76
|
-
var
|
|
77
|
+
var _e = react_intersection_observer_1.useInView({
|
|
77
78
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
78
79
|
rootMargin: intersectionMargin || "0px 0px 0px 0px",
|
|
79
80
|
triggerOnce: true
|
|
80
|
-
}), ref =
|
|
81
|
+
}), ref = _e.ref, inView = _e.inView;
|
|
81
82
|
var absolutePositioning = {
|
|
82
83
|
position: "absolute",
|
|
83
84
|
left: 0,
|
|
@@ -116,7 +117,7 @@ var Image = function (_a) {
|
|
|
116
117
|
react_1["default"].createElement("picture", null,
|
|
117
118
|
webpSource,
|
|
118
119
|
regularSource,
|
|
119
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: data.alt, title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
120
|
+
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
120
121
|
};
|
|
121
122
|
exports.Image = Image;
|
|
122
123
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqD;AACrD,iCAA+B;AAC/B,2EAAwD;AAExD,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAC5C,IAAM,aAAa,GAAG,KAAK;IACzB,CAAC,CAAC,UAAC,GAAW,IAAK,OAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxD,CAAwD;IAC3E,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;AAEhB,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;AA0D3C,IAAM,gBAAgB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA;IAClD,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,IAAI,MAAM,CAAC;KACzB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA,EAAE,MAAM,YAAA;IAC3C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEK,IAAM,KAAK,GAA6B,UAAU,EAYxD
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/Image/index.js
CHANGED
|
@@ -46,16 +46,17 @@ var imageShowStrategy = function (_a) {
|
|
|
46
46
|
return true;
|
|
47
47
|
};
|
|
48
48
|
export var Image = function (_a) {
|
|
49
|
-
var
|
|
50
|
-
var _c =
|
|
49
|
+
var _b;
|
|
50
|
+
var className = _a.className, fadeInDuration = _a.fadeInDuration, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _c = _a.lazyLoad, lazyLoad = _c === void 0 ? true : _c, style = _a.style, pictureStyle = _a.pictureStyle, explicitWidth = _a.explicitWidth, data = _a.data;
|
|
51
|
+
var _d = useState(false), loaded = _d[0], setLoaded = _d[1];
|
|
51
52
|
var handleLoad = useCallback(function () {
|
|
52
53
|
setLoaded(true);
|
|
53
54
|
}, []);
|
|
54
|
-
var
|
|
55
|
+
var _e = useInView({
|
|
55
56
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
56
57
|
rootMargin: intersectionMargin || "0px 0px 0px 0px",
|
|
57
58
|
triggerOnce: true
|
|
58
|
-
}), ref =
|
|
59
|
+
}), ref = _e.ref, inView = _e.inView;
|
|
59
60
|
var absolutePositioning = {
|
|
60
61
|
position: "absolute",
|
|
61
62
|
left: 0,
|
|
@@ -94,6 +95,6 @@ export var Image = function (_a) {
|
|
|
94
95
|
React.createElement("picture", null,
|
|
95
96
|
webpSource,
|
|
96
97
|
regularSource,
|
|
97
|
-
data.src && (React.createElement("img", { src: data.src, alt: data.alt, title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
98
|
+
data.src && (React.createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
98
99
|
};
|
|
99
100
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAC5C,IAAM,aAAa,GAAG,KAAK;IACzB,CAAC,CAAC,UAAC,GAAW,IAAK,OAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxD,CAAwD;IAC3E,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;AAEhB,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;AA0D3C,IAAM,gBAAgB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA;IAClD,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,IAAI,MAAM,CAAC;KACzB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA,EAAE,MAAM,YAAA;IAC3C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAA6B,UAAU,EAYxD
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-datocms",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.7",
|
|
4
4
|
"types": "dist/types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
]
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"datocms-listen": "^0.1.
|
|
77
|
+
"datocms-listen": "^0.1.6",
|
|
78
78
|
"datocms-structured-text-generic-html-renderer": "^1.1.0",
|
|
79
79
|
"datocms-structured-text-utils": "^1.1.0",
|
|
80
80
|
"intersection-observer": "^0.12.0",
|
package/CHANGELOG.md
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
|
|
5
|
-
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
-
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
-
|
|
8
|
-
## [1.2.2] - 2020-05-7
|
|
9
|
-
|
|
10
|
-
### Fixed
|
|
11
|
-
|
|
12
|
-
- Support for IE11
|
|
13
|
-
|
|
14
|
-
## [1.2.1] - 2020-03-24
|
|
15
|
-
|
|
16
|
-
### Fixed
|
|
17
|
-
|
|
18
|
-
- Hide placeholder base64 when actual image is loaded
|
|
19
|
-
|
|
20
|
-
## [1.1.2] - 2020-03-18
|
|
21
|
-
|
|
22
|
-
### Added
|
|
23
|
-
|
|
24
|
-
- `explicitWidth` prop to specify wheter the image wrapper should explicitely declare the width of the image or keep it fluid
|
|
25
|
-
|
|
26
|
-
## [1.1.0] - 2020-03-06
|
|
27
|
-
|
|
28
|
-
### Added
|
|
29
|
-
|
|
30
|
-
- You can now specify `style` and `pictureStyle` props;
|
|
31
|
-
|
|
32
|
-
### Fixed
|
|
33
|
-
|
|
34
|
-
- Added `max-width` rule to inner `<img>` element;
|
|
35
|
-
|
|
36
|
-
### Changed
|
|
37
|
-
|
|
38
|
-
- Changed the default `display` rule of the component to `inline-block` to better replicate the behaviour of the default `<img>` element;
|