Skip to content

Commit

Permalink
Rename package and publish
Browse files Browse the repository at this point in the history
  • Loading branch information
Aljullu committed Feb 23, 2018
1 parent 290067b commit 28a274f
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 15 deletions.
21 changes: 11 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,45 +17,46 @@ React Component to lazy load images using a HOC to track window scroll position.

## Installation

1. Install react-lazy-load-image as a dependency:
1. Install react-lazy-load-image-component as a dependency:
```bash
# Yarn
$ yarn add react-lazy-load-image
$ yarn add react-lazy-load-image-component

# NPM
$ npm i --save react-lazy-load-image
$ npm i --save react-lazy-load-image-component
```
2. Import the LazyLoadImage component:
```javascript
import { LazyLoadImage } from 'react-lazy-load-image'
import { LazyLoadImage } from 'react-lazy-load-image-component'
```

3. Import the trackWindowScroll HOC:
```javascript
import { trackWindowScroll } from 'react-lazy-load-image'
import { trackWindowScroll } from 'react-lazy-load-image-component'
```


## Usage

```javascript
import React from 'react';
import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image';
import { LazyLoadImage, trackWindowScroll }
from 'react-lazy-load-image-component';

const Gallery = ({ images, scrollPosition }) => (
<div>
{images.map((image) =>
<LazyLoadImage
key={image.key}
height={image.height}
scrollPosition={scrollPosition} // pass the scrollPosition to the image
scrollPosition={scrollPosition} // pass the scrollPosition
src={image.src} // use normal <img> attributes as props
width={image.width} />
)}
</div>
);
// Wrap Gallery with trackWindowScroll HOC so it receives a scrollPosition prop
// to pass down to the images
// Wrap Gallery with trackWindowScroll HOC so it receives
// a scrollPosition prop to pass down to the images
export default trackWindowScroll(Gallery);
```

Expand All @@ -73,4 +74,4 @@ export default trackWindowScroll(Gallery);

## Screenshots

<a href="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image/master/screenshots/example.gif"><img src="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image/master/screenshots/example.gif" alt="" /></a>
<a href="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image-component/master/screenshots/example.gif"><img src="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image-component/master/screenshots/example.gif" alt="" /></a>
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-lazy-load-image",
"version": "0.0.1",
"name": "react-lazy-load-image-component",
"version": "1.0.0",
"description": " React Component to lazy load images using a HOC to track window scroll position. ",
"main": "build/index.js",
"peerDependencies": {
Expand Down Expand Up @@ -32,7 +32,7 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/Aljullu/react-lazy-load-image.git"
"url": "git+https://github.com/Aljullu/react-lazy-load-image-component.git"
},
"keywords": [
"react",
Expand All @@ -44,7 +44,7 @@
},
"license": "MIT",
"bugs": {
"url": "https://github.com/Aljullu/react-lazy-load-image/issues"
"url": "https://github.com/Aljullu/react-lazy-load-image-component/issues"
},
"homepage": "https://github.com/Aljullu/react-lazy-load-image#readme"
"homepage": "https://github.com/Aljullu/react-lazy-load-image-component#readme"
}

0 comments on commit 28a274f

Please sign in to comment.