Skip to content

🌇 Get all the benefits of Imgix using React. Supports LQIP.

Notifications You must be signed in to change notification settings

dehbmarques/reimgix

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

reimgix

npm npm GitHub issues GitHub stars Twitter

🌇 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.

About

🌇 Get all the benefits of Imgix using React. Supports LQIP.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •