https://github.com/dehbmarques/reimgix

:city_sunrise: Get all the benefits of Imgix using React. Supports LQIP.
https://github.com/dehbmarques/reimgix

imgix react-component render-prop

Last synced: about 1 year ago
JSON representation

:city_sunrise: Get all the benefits of Imgix using React. Supports LQIP.

• Host: GitHub
• URL: https://github.com/dehbmarques/reimgix
• Owner: dehbmarques
• Created: 2017-12-02T20:47:33.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-19T17:22:52.000Z (almost 8 years ago)
• Last Synced: 2024-04-25T21:22:20.479Z (about 2 years ago)
• Topics: imgix, react-component, render-prop
• Language: TypeScript
• Homepage:
• Size: 78.1 KB
• Stars: 38
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![reimgix](./logo.png)

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

[![npm](https://img.shields.io/npm/dt/reimgix.svg?style=flat-square)](https://www.npmjs.com/package/reimgix)

[![GitHub issues](https://img.shields.io/github/issues/one-market/reimgix.svg?style=flat-square)](https://github.com/one-market/reimgix/issues)

[![GitHub stars](https://img.shields.io/github/stars/one-market/reimgix.svg?style=flat-square)](https://github.com/one-market/reimgix/stargazers)

[![Twitter](https://img.shields.io/twitter/url/https/github.com/one-market/reimgix.svg?style=social&style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/one-market/reimgix)

:city_sunrise: React utils to [imgix™](https://www.imgix.com/)

# Usage

Generate a stringified url with params

```js

import { generate } from 'reimgix'

const url = generate('http://your.site/img.png?fit=clamp', { h: 50 })

// url = http://your.site/img.png?fit=clamp&h=50

```

```js

const url = generate(

  'http://your.site/img.png?fit=clamp',

  { h: 50 },

  { removeUrlParams: true } // will remove fit=clamp

)

// url = http://your.site/img.png?h=50

```

Lqip techinique

```jsx

import { Lqip, generate } from 'reimgix'

const url = generate('http://your.site/bear.png?fit=clamp', { h: 50 })

const App = () => (

  

    {({ src }) => (

      

    )}

  

)

```

```jsx

import { Lqip, generate } from 'reimgix'

const url = generate('http://your.site/bear.png?fit=clamp', { h: 50 })

const App = () => (

  

    {({ src, loaded }) => (

      


        Image below is using {loaded ? 'full version' : 'lqip version'}

        

      

    )}

  

)

```


# Install

### Node Module

```

yarn add reimgix

# or

npm i reimgix

```

### UMD library

```html

```

exposed as `Reimgix`

# Contribute

You can help improving this project by sending PRs and helping with issues.