loadable-image - npm Package Compare versions

Comparing version 3.2.5 to 3.2.6

package.json

 {
 	"name": "loadable-image",
-	"version": "3.2.5",
+	"version": "3.2.6",
 	"repository": {
@@ -5,0 +5,0 @@ "type": "git",

README.md

@@ -79,20 +79,20 @@ ## loadable-image
 
-### Fade transition
-By default `AsyncImage` uses `Fade` transition.
+### Blur transition
+Here’s how you can implement a `Blur` transition that replaces a `low-resolution image` with a `high-resolution` one
 ```tsx
-import { Fade } from 'transitions-kit'
+import { Blur } from 'transitions-kit'
 import { AsyncImage } from 'loadable-image'
 ...
 <AsyncImage
-  src='https://picsum.photos/1900'
+  src='./original-image.jpg'
   style={{ width: 150, height: 150 }}
-  loader={<div style={{ background: '#888' }}/>}
-  Transition={Fade}
+  Transition={props => <Blur radius={10} {...props}/>}
+  loader={<img src='./extra-small-1x1.jpg' />}
 />
 ```
 
-### Blur transition
-Here is how you can use `Blur` transition and specify custom `radius` of the blur.
+### Fade transition
+By default `AsyncImage` uses `Fade` transition.
 ```tsx
-import { Blur } from 'transitions-kit'
+import { Fade } from 'transitions-kit'
 import { AsyncImage } from 'loadable-image'
@@ -103,4 +103,4 @@ ...
   style={{ width: 150, height: 150 }}
-  Transition={props => <Blur radius={10} {...props}/>}
   loader={<div style={{ background: '#888' }}/>}
+  Transition={Fade}
 />
@@ -128,11 +128,12 @@ ```
 
-| Property   | Type                               | Description                                                                                                                     |
-|------------|------------------------------------|---------------------------------------------------------------------------------------------------------------------------------|
-| className  | `String`                           | NOTE: CSS from `style` object has a higher priority                                                                             |
-| style      | `CSSProperties`                    | CSSStyleDeclaration object                                                                                                      |
-| rootMargin | `string` by default: `'600px 0px'` | Margin around the root. Specifies when to trigger an image download.                                                            |
-| loader     | `ReactElement`                     | React element to display a `loading` state.                                                                                     |
-| error      | `ReactElement`                     | React element to display an `error` state.                                                                                      |
-| sources    | `Array<SourceProps>`               | An array of `options` for `<source />` element.                                                                                 |
-| Transition | `ComponentType<TransitionProps>`   | Custom Transition component. Check out [transitions-kit](https://github.com/denchiklut/transitions-kit)'s predefined components |
+| Property   | Type                               | Description                                                                                                                             |
+|------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
+| className  | `String`                           | NOTE: CSS from `style` object has a higher priority                                                                                     |
+| style      | `CSSProperties`                    | CSSStyleDeclaration object                                                                                                              |
+| rootMargin | `string` by default: `'600px 0px'` | Margin around the root. Specifies when to trigger an image download.                                                                    |
+| loader     | `ReactElement`                     | React element to display a `loading` state.                                                                                             |
+| error      | `ReactElement`                     | React element to display an `error` state.                                                                                              |
+| sources    | `Array<SourceProps>`               | An array of `options` for `<source />` element.                                                                                         |
+| timeout    | `Number` or `Object`               | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| Transition | `ComponentType<TransitionProps>`   | Custom Transition component. Check out [transitions-kit](https://github.com/denchiklut/transitions-kit)'s predefined components         |
 
@@ -139,0 +140,0 @@ ### Requirements for loader & error props:

No alert changes

Improved metrics

Total package byte prevSize

19155

1.54%

Number of lines in readme file

140

0.72%

No dependency changes