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.

reimgix's Issues

Typescript typings

Any plans to add typescript typings?

It could be really useful on a huge project we are working right now.

Nice lib BTW 😎

Support for srcset attribute

What are your thoughts on supporting the srcset attribute for responsive images?