Skip to content

Commit 8050820

Browse files
author
fpapado
committed
Update stories, handle refs
Refs make things more annoying, but at least there is no wrapper now.
1 parent cc223fa commit 8050820

File tree

7 files changed

+2581
-2357
lines changed

7 files changed

+2581
-2357
lines changed

‎README.md‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,15 @@ import { LazyImage } from "react-lazy-images";
107107
<LazyImage
108108
src="/img/porto_buildings_large.jpg"
109109
alt="Buildings with tiled exteriors, lit by the sunset."
110-
placeholder={({ imageProps }) => (
111-
<img src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
110+
placeholder={({ imageProps, ref }) => (
111+
<img ref={ref} src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
112112
)}
113113
actual={({ imageProps }) => <img {...imageProps} />}
114114
/>;
115115
```
116116

117+
:warning: It is important that you pass on the ref in placeholder, otherwise the detection of the element intersecting is impossible. :warning:
118+
117119
Note that while you can set the rendered components to be anything you want, you most likely want to use the same `src`, `srcSet` and `alt` attributes in an `<img>` eventually.
118120
To keep this consistent, and reduce repetition, the render callbacks pass those attributes back to you.
119121

@@ -139,12 +141,12 @@ Thus, whether you want to display a simple `<img>`, your own `<Image>`, or even
139141
alt="Buildings with tiled exteriors, lit by the sunset."
140142
// This is rendered first, notice how the src is different
141143
placeholder={
142-
({imageProps}) =>
143-
<img src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
144+
({imageProps, ref}) =>
145+
<img ref={ref} src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
144146
}
145147
// This is rendered once in view; we use the src and alt above for consistency
146148
actual={
147-
({src, alt}) =>
149+
({imageProps}) =>
148150
<img {...imageProps} />
149151
}
150152
/>
@@ -154,8 +156,8 @@ Thus, whether you want to display a simple `<img>`, your own `<Image>`, or even
154156
src="/img/porto_buildings_large.jpg"
155157
alt="Buildings with tiled exteriors, lit by the sunset."
156158
placeholder={
157-
({imageProps}) =>
158-
<div className={'LazyImage-Placeholder'}>
159+
({imageProps, ref}) =>
160+
<div ref={ref} className={'LazyImage-Placeholder'}>
159161
<img src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
160162
</div>
161163
}
@@ -182,9 +184,10 @@ import { LazyImageFull, ImageState } from "react-lazy-images";
182184
// Function as child
183185
// `src`, `alt` and `srcSet` are passed back to the render callback for convenience/consistency
184186
<LazyImageFull src="/img/porto_buildings_large.jpg">
185-
{({ imageProps, imageState }) => (
187+
{({ imageProps, imageState, ref }) => (
186188
<img
187189
{...imageProps}
190+
ref={ref}
188191
src={
189192
imageState === ImageState.LoadSuccess
190193
? imageProps.src
@@ -220,15 +223,15 @@ This behaviour is provided with the `src` prop:
220223
src="/img/porto_buildings_large.jpg"
221224
alt="Buildings with tiled exteriors, lit by the sunset."
222225
placeholder={
223-
({alt}) =>
224-
<div className={`LazyImage-Placeholder`}">
225-
<img src="/img/porto_buildings_lowres.jpg" alt={alt} />
226+
({imageProps, ref}) =>
227+
<div ref={ref} className={`LazyImage-Placeholder`}">
228+
<img src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
226229
</div>
227230
}
228231
actual={
229-
({src, alt}) =>
232+
({imageProps}) =>
230233
<div className={`LazyImage-Actual`}>
231-
<img src={src} alt={alt} />
234+
<img {...imageProps} />
232235
</div>
233236
}
234237
/>
@@ -245,7 +248,8 @@ You can choose what to display on Loading and Error using the render props `load
245248
<LazyImage
246249
src="/image/brokenimagenotherewhoops.jpg"
247250
alt="Buildings with tiled exteriors, lit by the sunset."
248-
actual={({ src, alt }) => <img src={src} alt={alt} />}
251+
actual={({ imageProps }) => <img {...imageProps} />}
252+
placeholder={({ ref }) => <div ref={ref} />}
249253
loading={() => (
250254
<div>
251255
<p className="pa3 f5 lh-copy near-white">Loading...</p>
@@ -276,10 +280,10 @@ This behaviour is available by using a `loadEagerly` prop:
276280
loadEagerly
277281
src="/img/porto_buildings_large.jpg"
278282
alt="Buildings with tiled exteriors, lit by the sunset."
279-
placeholder={({ alt }) => (
280-
<img src="/img/porto_buildings_lowres.jpg" alt={alt} />
283+
placeholder={({ imageProps, ref }) => (
284+
<img ref={ref} src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
281285
)}
282-
actual={({ src, alt }) => <img src={src} alt={alt} />}
286+
actual={({ imageProps }) => <img {...imageProps} />}
283287
/>
284288
```
285289
@@ -406,29 +410,29 @@ The presentation can be derived from those plus, crucially, any specific needs y
406410
407411
**`<LazyImage />`** accepts the following props:
408412
409-
| Name | Type | Default | Required | Description |
410-
| ----------------- | -------------------------------------------------------------------------- | ----------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
411-
| **src** | String | | true | The source of the image to load |
412-
| **alt** | String | | false | The alt text description of the image you are loading |
413-
| **srcSet** | String | | false | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
414-
| **sizes** | String | | false | If your images use srcset, the sizes attribute helps the browser decide which source to load. |
415-
| **actual** | Function (render callback) of type ({src, alt, srcSet}) => React.ReactNode | | true | Component to display once image has loaded |
416-
| **placeholder** | Function (render callback) of type ({alt}) => React.ReactNode | undefined | false | Component to display while no request for the actual image has been made |
417-
| **loading** | Function (render callback) of type () => React.ReactNode | placeholder | false | Component to display while the image is loading |
418-
| **error** | Function (render callback) of type () => React.ReactNode | actual (broken image) | false | Component to display if the image loading has failed (render prop) |
419-
| **loadEagerly** | Boolean | false | false | Whether to skip checking for viewport and always show the 'actual' component |
420-
| **observerProps** | {threshold: number, rootMargin: string} | {threshold: 0.01, rootMargin: "50px 0px"} | false | Subset of props for the IntersectionObserver |
413+
| Name | Type | Default | Required | Description |
414+
| ----------------- | ------------------------------------------------------------------------- | ----------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
415+
| **src** | String | | true | The source of the image to load |
416+
| **alt** | String | | false | The alt text description of the image you are loading |
417+
| **srcSet** | String | | false | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
418+
| **sizes** | String | | false | If your images use srcset, the sizes attribute helps the browser decide which source to load. |
419+
| **actual** | Function (render callback) of type ({imageProps}) => React.ReactNode | | true | Component to display once image has loaded |
420+
| **placeholder** | Function (render callback) of type ({imageProps, ref}) => React.ReactNode | undefined | true | Component to display while no request for the actual image has been made |
421+
| **loading** | Function (render callback) of type () => React.ReactNode | placeholder | false | Component to display while the image is loading |
422+
| **error** | Function (render callback) of type () => React.ReactNode | actual (broken image) | false | Component to display if the image loading has failed (render prop) |
423+
| **loadEagerly** | Boolean | false | false | Whether to skip checking for viewport and always show the 'actual' component |
424+
| **observerProps** | {threshold: number, rootMargin: string} | {threshold: 0.01, rootMargin: "50px 0px"} | false | Subset of props for the IntersectionObserver |
421425
422426
**`<LazyImageFull />`** accepts the following props:
423427
424-
| Name | Type | Default | Required | Description |
425-
| ----------------- | -------------------------------------------------------------- | ----------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------- |
426-
| **src** | String | | true | The source of the image to load |
427-
| **alt** | String | | false | The alt text description of the image you are loading |
428-
| **srcSet** | String | | false | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
429-
| **loadEagerly** | Boolean | false | false | Whether to skip checking for viewport and always show the 'actual' component |
430-
| **observerProps** | {threshold: number, rootMargin: string} | {threshold: 0.01, rootMargin: "50px 0px"} | false | Subset of props for the IntersectionObserver |
431-
| **children** | Function of type ({imageProps, imageState}) => React.ReactNode | | true (or `render`) | Function to call that renders based on the props and state provided to it by LazyImageFull |
428+
| Name | Type | Default | Required | Description |
429+
| ----------------- | ------------------------------------------------------------------- | ----------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
430+
| **src** | String | | true | The source of the image to load |
431+
| **alt** | String | | false | The alt text description of the image you are loading |
432+
| **srcSet** | String | | false | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
433+
| **loadEagerly** | Boolean | false | false | Whether to skip checking for viewport and always show the 'actual' component |
434+
| **observerProps** | {threshold: number, rootMargin: string} | {threshold: 0.01, rootMargin: "50px 0px"} | false | Subset of props for the IntersectionObserver |
435+
| **children** | Function of type ({imageProps, imageState, ref}) => React.ReactNode | | true | Function to call that renders based on the props and state provided to it by LazyImageFull |
432436
433437
[You can consult Typescript types in the code](./src/LazyImage.tsx) for more context.
434438

0 commit comments

Comments
 (0)