Skip to content

Commit

Permalink
Merge pull request #3 from saitoeku3/add-docs
Browse files Browse the repository at this point in the history
Add docs
  • Loading branch information
saitolume authored Jan 7, 2020
2 parents 02adc32 + 8b1ef93 commit 2bd5e69
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 10 deletions.
38 changes: 30 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# use-lazyload-ref

[![npm version](https://badge.fury.io/js/use-lazyload-ref.svg)](https://badge.fury.io/js/use-lazyload-ref) ![CI Status](https://github.com/saitoeku3/use-lazyload-ref/workflows/Node%20CI/badge.svg)
[![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/saitoeku3/use-lazyload-ref/blob/master/LICENSE) [![npm version](https://badge.fury.io/js/use-lazyload-ref.svg)](https://badge.fury.io/js/use-lazyload-ref) ![CI Status](https://github.com/saitoeku3/use-lazyload-ref/workflows/Node%20CI/badge.svg)

> Custom hook to use lazy load easily
> Custom hook to use lazyload easily
## Install
## Installation

```
$ npm install use-lazyload-ref
Expand All @@ -13,22 +13,44 @@ $ yarn add use-lazyload-ref

## Usage

To enable lazy loading, simply specify `ref` and `data-src` attributes.

```jsx
import React from 'react'
import useLazyloadRef from 'use-lazyload-ref'

const Component = ({ url }) => {
const [ref, isLoaded] = useLazyloadRef()
const [ref, hasLoaded] = useLazyloadRef()

return (
<>
<div>
{isLoaded || <Skeleton />}
<img ref={ref} data-src={url}>
</>
<img ref={ref} data-src={url} />
{/* <audio ref={ref} data-src={url} />*/}
{/* <iframe ref={ref} data-src={url} />*/}
{/* <video ref={ref} data-src={url} />*/}
{/* <div style={{ backgroundImage: `url(${url})` }}></div>*/}
</div>
)
}
```

## API

### `useLazyloadRef: () => [(node: HTMLElement | null) => void, boolean]`

Custom hook.
In addition to `src` in `audio`, `iframe`, `img` and `video`, CSS property `background-image` can be lazy loaded.

```jsx
const [ref, hasLoaded] = useLazyloadRef()
```

`useLazyloadRef` returns a callback ref function and a load state.

- `ref`: Initialize observer for lazyload.
- `hasLoaded`: Default is false. Turn true if the source has finished loading.

## License

MIT © saitoeku3
MIT
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "use-lazyload-ref",
"version": "0.1.2",
"description": "Custom hook to use lazy load easily",
"description": "Custom hook to use lazyload easily",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"repository": {
Expand All @@ -12,7 +12,9 @@
"dist"
],
"keywords": [
"react"
"react",
"hooks",
"lazyload"
],
"scripts": {
"build": "tsc -b tsconfig.json && npm run minify",
Expand Down

0 comments on commit 2bd5e69

Please sign in to comment.