React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by jlaw

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.UserAvatar {
  display: inline-block;
  color: white;
}

.UserAvatar--inner {
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.UserAvatar--light {
  color: gray;
}

.UserAvatar--light .UserAvatar--inner {
  border: 1px solid lightgray;
}

Babel + JSX

// from https://flatuicolors.com/
const defaultColors = [
  '#2ecc71', // emerald
  '#3498db', // peter river
  '#8e44ad', // wisteria
  '#e67e22', // carrot
  '#e74c3c', // alizarin
  '#1abc9c', // turquoise
  '#2c3e50', // midnight blue
];

const defaultSizesKeys = [
  'original',
  'thumb',
  'micro',
  'upto600',
  'full',
  'thumb100',
  'square210',
  'square400',
  'width400',
  'width1920',
]

const defaultSizes = {
  // legacy
  original: {
    key: 'original',
    width: 3000,
    height: 3000,
  },
  thumb: {
    key: 'thumb',
    width: 50,
    height: 50,
  },
  micro: {
    key: 'micro',
    width: 30,
    height: 30,
  },

  // scalable sizes
  upto600: {
    key: "600",
    width: 600,
    height: 600,
  },
  full: {
    key: "180",
    width: 180,
    height: 180,
  },
  thumb100: {
    key: "100",
    width: 100,
    height: 100
  },
  square210: {
    key: "210",
    width: 210,
    height: 210
  },
  square400: {
    key: "400",
    width: 400,
    height: 400
  },
  width400: {
    key: "400w",
    width: 400,
    height: 0
  },
  width1920: {
    key: "1920w",
    width: 1920,
    height: 0
  }
}

function sumChars(str) {
  let sum = 0;
  for(let i = 0; i < str.length; i++) {
    sum += str.charCodeAt(i);
  }

  return sum;
}

function getInitials (string) {
    var names = string.split(' '),
        initials = names[0].substring(0, 1).toUpperCase();
    
    if (names.length > 1) {
        initials += names[names.length - 1].substring(0, 1).toUpperCase();
    }
    return initials;
};

function imageExists(imgSet){

	var promises = [];
  if (!imgSet || !imgSet.length) return false; 
  imgSet.forEach((i) => {
  	var http = new XMLHttpRequest();

    http.open('HEAD', i, false);
    http.send();
    promises.push(http.status != 404);
  });
	return promises.some(p => p);
}

class UserAvatar extends React.Component {
  render() {
    let {
      borderRadius='100%',
      src,
      srcset,
      name,
      color,
      colors=defaultColors,
 ...