dehbmarques/reimgix

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

🌇 React utils to imgix™

Usage

Generate a stringified url with params

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

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

import { Lqip, generate } from 'reimgix'

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

const App = () => (
  <Lqip src={url}>
    {({ src }) => (
      <img src={src} alt="Bear" />
    )}
  </Lqip>
)

import { Lqip, generate } from 'reimgix'

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

const App = () => (
  <Lqip src={url}>
    {({ src, loaded }) => (
      <div>
        Image below is using {loaded ? 'full version' : 'lqip version'}
        <img src={src} alt="Bear" />
      </div>
    )}
  </Lqip>
)

Install

Node Module

yarn add reimgix

# or

npm i reimgix

UMD library

<script src="https://unpkg.com/reimgix/dist/reimgix.min.js"></script>

exposed as Reimgix

Contribute

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