Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding loading strategy (lazy load) prop #101

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Adding loading strategy (lazy load) prop #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 21 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,26 +38,27 @@ import ReactCompareImage from 'react-compare-image';

## Props

| Prop (\* required) | type | default | description |
| ------------------------ | ----------------------- | :---------: | --------------------------------------------------------------------------------------------------------------------- |
| aspectRatio | `'taller'` or `'wider'` | `'taller'` | Which to choose if the aspect ratios of the images are different |
| handle | element | null | Custom handle element. Just pass `<React.Fragment />` if you want to remove handle. |
| handleSize | number (px) | 40 | diameter of slider handle (by pixel) |
| hover | boolean | false | Whether to slide at hover |
| leftImage \* | string | null | left image's url |
| leftImageAlt | string | `''` | alt props for left image |
| leftImageCss | object | {} | Additional css for left image |
| leftImageLabel | string | null | Label for the image (e.g. `before`) |
| onSliderPositionChange | function | null | Callback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg |
| rightImage \* | string | null | right image's url |
| rightImageAlt | string | `''` | alt props for right image |
| rightImageCss | object | {} | Additional css for right image |
| rightImageLabel | string | null | Label for the image (e.g. `after`) |
| skeleton | element | null | Element displayed while image is loading |
| sliderLineColor | string | `'#ffffff'` | line color of slider |
| sliderLineWidth | number (px) | 2 | line width of slider (by pixel) |
| sliderPositionPercentage | number (float) | 0.5 | Default line position (from 0 to 1) |
| vertical | boolean | false | Compare images vertically instead of horizontally. The left image is on the top and the right image is on the bottom. |
| Prop (\* required) | type | default | description |
| ------------------------ | ------------------------------- | :---------: | --------------------------------------------------------------------------------------------------------------------- |
| aspectRatio | `'taller'` or `'wider'` | `'taller'` | Which to choose if the aspect ratios of the images are different |
| handle | element | null | Custom handle element. Just pass `<React.Fragment />` if you want to remove handle. |
| handleSize | number (px) | 40 | diameter of slider handle (by pixel) |
| hover | boolean | false | Whether to slide at hover |
| leftImage \* | string | null | left image's url |
| leftImageAlt | string | `''` | alt props for left image |
| leftImageCss | object | {} | Additional css for left image |
| leftImageLabel | string | null | Label for the image (e.g. `before`) |
| loadingStrategy | `'eager'`, `'lazy'` or `'auto'` | `'auto'` | Loading strategy for images |
| onSliderPositionChange | function | null | Callback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg |
| rightImage \* | string | null | right image's url |
| rightImageAlt | string | `''` | alt props for right image |
| rightImageCss | object | {} | Additional css for right image |
| rightImageLabel | string | null | Label for the image (e.g. `after`) |
| skeleton | element | null | Element displayed while image is loading |
| sliderLineColor | string | `'#ffffff'` | line color of slider |
| sliderLineWidth | number (px) | 2 | line width of slider (by pixel) |
| sliderPositionPercentage | number (float) | 0.5 | Default line position (from 0 to 1) |
| vertical | boolean | false | Compare images vertically instead of horizontally. The left image is on the top and the right image is on the bottom. |

## Supported browzer

Expand Down
29 changes: 29 additions & 0 deletions src/ReactCompareImage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,4 +134,33 @@ describe('ReactCompareImage', () => {
dummyRightImageAlt,
);
});

describe('loading strategy props', () => {
test('seting loading strategy', () => {
const strategy = 'eager';

const { getByTestId } = render(
<ReactCompareImage
leftImage={DUMMY_LEFT_IMAGE}
rightImage={DUMMY_RIGHT_IMAGE}
loadingStrategy={strategy}
/>,
);

expect(getByTestId('left-image')).toHaveAttribute('loading', strategy);
expect(getByTestId('right-image')).toHaveAttribute('loading', strategy);
});

test('default loading strategy', () => {
const { getByTestId } = render(
<ReactCompareImage
leftImage={DUMMY_LEFT_IMAGE}
rightImage={DUMMY_RIGHT_IMAGE}
/>,
);

expect(getByTestId('left-image')).toHaveAttribute('loading', 'auto');
expect(getByTestId('right-image')).toHaveAttribute('loading', 'auto');
});
});
});
6 changes: 6 additions & 0 deletions src/ReactCompareImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ interface IProps {
sliderLineWidth?: number;
sliderPositionPercentage?: number;
vertical?: boolean;
loadingStrategy?: 'lazy' | 'eager' | 'auto';
}

const defaultProps = {
Expand All @@ -38,6 +39,7 @@ const defaultProps = {
sliderLineWidth: 2,
sliderPositionPercentage: 0.5,
vertical: false,
loadingStrategy: 'auto'
};

const ReactCompareImage: React.FC<IProps> = props => {
Expand All @@ -60,6 +62,7 @@ const ReactCompareImage: React.FC<IProps> = props => {
sliderLineWidth,
sliderPositionPercentage,
vertical,
loadingStrategy,
} = props;

const horizontal = !vertical;
Expand Down Expand Up @@ -393,14 +396,17 @@ const ReactCompareImage: React.FC<IProps> = props => {
>
<img
onLoad={() => setRightImgLoaded(true)}
loading={loadingStrategy}
alt={rightImageAlt}
data-testid="right-image"
ref={rightImageRef}
src={rightImage}

style={styles.rightImage}
/>
<img
onLoad={() => setLeftImgLoaded(true)}
loading={loadingStrategy}
alt={leftImageAlt}
data-testid="left-image"
ref={leftImageRef}
Expand Down