How do i choose import/export in React

Question

I want to use WebP when the user open the Page in Chrome and else it should be png.

i found this Code:

var isChrome = !!window.chrome && !!window.chrome.webstore

But i cant put an If-statement around export or import

This is my Code so far:

import redditwebp from '../img/icons/reddit.webp';
import redditpng from '../img/icons/reddit.png';

var isChrome = !!window.chrome && !!window.chrome.webstore;

if(isChrome){
  export default {redditwebp}
}
else{
  export default {redditpng}
}

Answer 1

you shouldnt really be doing normal if statements you should do an inline one

const isChrome = !!window.chrome && !!window.chrome.webstore;

then in your actual code inline

<div>{isChome ? <img src={redditwebp} alt="" /> : <img src={redditpng} alt="" />}</div>

to me that is the best way to do it, you may have to write this.isChrome im not sure whether you will or not.

i will make this clearer.

import redditwebp from '../img/icons/reddit.webp';
import redditpng from '../img/icons/reddit.png';
import React, { Component } from 'react';

const isChrome = !!window.chrome && !!window.chrome.webstore;

export default class logo extends Component {
render(){
    return (
        <div>{isChome ? <img src={redditwebp} alt="" /> : <img src={redditpng} alt="" />}</div>
    }
}