Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/imcuttle/medium-image-progressive

Medium's progressive image style
https://github.com/imcuttle/medium-image-progressive

image medium medium-image progressive react

Last synced: 9 days ago
JSON representation

Medium's progressive image style

Host: GitHub
URL: https://github.com/imcuttle/medium-image-progressive
Owner: imcuttle
License: mit
Created: 2018-03-11T11:31:32.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2022-01-07T14:54:02.000Z (about 3 years ago)
Last Synced: 2025-01-07T21:11:34.332Z (about 1 month ago)
Topics: image, medium, medium-image, progressive, react
Language: JavaScript
Size: 6.5 MB
Stars: 3
Watchers: 2
Forks: 1
Open Issues: 1
Metadata Files:
- Readme: Readme.md
- License: License

Awesome Lists containing this project

README

        # medium-image-progressive

Medium's progressive image style.

[![build status](https://img.shields.io/travis/imcuttle/medium-image-progressive/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/medium-image-progressive)

[![NPM version](https://img.shields.io/npm/v/medium-image-progressive.svg?style=flat-square)](https://www.npmjs.com/package/medium-image-progressive)

[![NPM Downloads](https://img.shields.io/npm/dm/medium-image-progressive.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/medium-image-progressive)

[Demo](https://imcuttle.github.io/medium-image-progressive/)  

![](./snapshot.gif)

## Installation

### NPM

```bash

npm i medium-image-progressive

```

### UMD

name: mediumImageProgressive  

[unpkg](https://unpkg.com/medium-image-progressive)

## Usage

```javascript

import mediumImageProgressive from 'medium-image-progressive'

mediumImageProgressive('img selector', {

  // options

})

```

### Options

- `progressImageUrlGetter`   

  the thumb image url getter  

  default: `(elem) => elem.getAttribute('src')`

- `originImageUrlGetter`   

  default: `(elem) => elem.getAttribute('data-src')`

- `widthGetter`      

  image's width getter  

  default `elem => elem.getAttribute('width')`

- `heightGetter`    

  default: `elem => elem.getAttribute('height')`

### React Component

```javascript

import MPImg from 'medium-image-progressive/dist/react'

// render

```