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.

github danielmahon / opencrud-admin / src / components / ui / forms / FormikFileField.js View on Github external
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 (
github danielmahon / opencrud-admin / src / components / ui / widgets / ListFileWidget.js View on Github external
);
    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 && (
github danielmahon / opencrud-admin / src / components / ui / widgets / ListFileWidget.js View on Github external
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 (
github danielmahon / opencrud-admin / src / components / ui / forms / FormikFileField.js View on Github external
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

ISC
Latest version published 4 months ago

Package Health Score

86 / 100
Full package analysis

Popular react-imgix functions