Skip to content

Commit 866879d

Browse files
authored
Merge pull request #21 from wcandillon/wcandillon-patch-14
feat(component): API improvements
2 parents f9c8242 + e1433d7 commit 866879d

File tree

2 files changed

+15
-22
lines changed

2 files changed

+15
-22
lines changed

README.md

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,21 @@ $ npm install react-progressive-image-loading --save
1515
## Usage
1616

1717
```jsx
18-
<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png">
19-
{(src, style) => <img src={src} style={style} />}
20-
</ProgressiveImage>
18+
<ProgressiveImage
19+
preview="/images/tiny-preview.png"
20+
src="/images/preview.png"
21+
render={(src, style) => <img src={src} style={style} />}
22+
/>
2123
```
2224

2325
Instead of using the `img` tag, you can use `background-image` with a `div`.
2426

2527
```jsx
26-
<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png">
27-
{(src, style) => <div style={Object.assign(style, { backgroundImage: `url(${src})` })} />}
28-
</ProgressiveImage>
28+
<ProgressiveImage
29+
preview="/images/tiny-preview.png"
30+
src="/images/preview.png"
31+
render={(src, style) => <div style={Object.assign(style, { backgroundImage: `url(${src})` })} />}
32+
/>
2933
```
3034

3135
You can also customize the transition time and the timing function used for that transition.
@@ -35,16 +39,7 @@ You can also customize the transition time and the timing function used for that
3539
preview="/images/tiny-preview.png"
3640
src="/images/preview.png"
3741
transitionTime={500}
38-
transitionFunction="ease">
39-
{(src, style) => <img src={src} style={style} />}
40-
</ProgressiveImage>
41-
```
42-
43-
In case of `background=true`, it is possible to add some layers on top of the background image, for instance:
44-
45-
```jsx
46-
<ProgressiveImage
47-
preview="/images/tiny-preview.png" src="/images/preview.png" background={true}
48-
backgroundImages={["linear-gradient(to top, rgba(31,31,31,0.3), rgba(31,31,31,0.3))"]}
42+
transitionFunction="ease"
43+
render={(src, style) => <img src={src} style={style} />}
4944
/>
5045
```

src/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as React from "react";
33
export interface ProgressiveImageProps {
44
preview: string;
55
src: string;
6+
render: (src: string, style: {}) => JSX.Element;
67
transitionTime?: number;
78
timingFunction?: string;
89
initialBlur?: number;
@@ -33,11 +34,8 @@ export class ProgressiveImage extends React.Component<ProgressiveImageProps, Pro
3334

3435
render() {
3536
const {src} = this.state;
36-
const {children} = this.props;
37-
if (!children || typeof children !== "function") {
38-
throw new Error("ProgressiveImage requires a function as its only child");
39-
}
40-
return children(src, this.getStyle());
37+
const {render} = this.props;
38+
return render(src, this.getStyle());
4139
}
4240

4341
private fetch(src: string): Promise<string> {

0 commit comments

Comments
 (0)