reimgix
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

reimgix

npm npm GitHub issues GitHub stars Twitter

🌇 React utils to imgix™

Usage

Generate a stringified url with params

import { generate } from 'reimigx'
 
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 'reimigx'
 
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 'reimigx'
 
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.

Dependents (0)

Package Sidebar

Install

npm i reimgix

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

69.7 kB

Total Files

18

Last publish

Collaborators

  • pedronauck
  • renatorib