๐ React utils to imgixโข
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>
)
yarn add reimgix
# or
npm i reimgix
<script src="https://unpkg.com/reimgix/dist/reimgix.min.js"></script>
exposed as Reimgix
You can help improving this project by sending PRs and helping with issues.