How to use react-imgix - 4 common examples
To help you get started, we’ve selected a few react-imgix examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
danielmahon / opencrud-admin / src / components / ui / forms / FormikFileField.js View on Github 
render() {
const {
field: { value, ...field }, // { name, value, onChange, onBlur }
form, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
help,
...props
} = this.props;
const { previewOpen } = this.state;
const { type } = form.values;
const isSupported = SUPPORTED_IMGIX_FORMATS.includes(
path.extname(value).substring(1)
);
const image = isSupported
? value
: buildURL(`${process.env.REACT_APP_IMGIX_ENDPOINT}/placeholder.png`, {
w: '100%',
txt: path
.extname(value)
.substring(1)
.toUpperCase(),
txtsize: 48,
txtpad: 164,
txtcolor: '#767676',
txtalign: 'right,middle',
txtfont: 'Futura COndensed Medium',
});
const lqip = isSupported
? buildURL(value, { w: 16, h: 16, auto: 'format' })
: image;
return ();
const image = isSupported
? value
: buildURL(`${process.env.REACT_APP_IMGIX_ENDPOINT}/placeholder.png`, {
w: 360,
txt: path
.extname(value)
.substring(1)
.toUpperCase(),
txtsize: 24,
txtpad: 20,
txtcolor: '#767676',
txtalign: 'right,middle',
txtfont: 'Futura COndensed Medium',
});
const lqip = buildURL(value, { w: 16, h: 16, auto: 'format' });
return (
{isSupported && (url={value}
width={128}
height={128}
config={{
vimeo: { playerOptions: { autopause: true }, preload: true },
}}
/>
);
}
const isSupported = SUPPORTED_IMGIX_FORMATS.includes(
path.extname(value).substring(1)
);
const image = isSupported
? value
: buildURL(`${process.env.REACT_APP_IMGIX_ENDPOINT}/placeholder.png`, {
w: 360,
txt: path
.extname(value)
.substring(1)
.toUpperCase(),
txtsize: 24,
txtpad: 20,
txtcolor: '#767676',
txtalign: 'right,middle',
txtfont: 'Futura COndensed Medium',
});
const lqip = buildURL(value, { w: 16, h: 16, auto: 'format' });
return (const image = isSupported
? value
: buildURL(`${process.env.REACT_APP_IMGIX_ENDPOINT}/placeholder.png`, {
w: '100%',
txt: path
.extname(value)
.substring(1)
.toUpperCase(),
txtsize: 48,
txtpad: 164,
txtcolor: '#767676',
txtalign: 'right,middle',
txtfont: 'Futura COndensed Medium',
});
const lqip = isSupported
? buildURL(value, { w: 16, h: 16, auto: 'format' })
: image;
return (
{type && type.includes('video') ? (
<div style="{{">
<div style="{{">
</div></div>react-imgix
React Component for displaying an image from Imgix
