react-color/es/components/github/GithubSwatch.js

A Collection of Color Pickers from Sketch, Photoshop, Chrome & more

import React from 'react';
import reactCSS, { handleHover } from 'reactcss';

import { Swatch } from '../common';

export var GithubSwatch = function GithubSwatch(_ref) {
  var hover = _ref.hover,
      color = _ref.color,
      onClick = _ref.onClick,
      onSwatchHover = _ref.onSwatchHover;

  var hoverSwatch = {
    position: 'relative',
    zIndex: '2',
    outline: '2px solid #fff',
    boxShadow: '0 0 5px 2px rgba(0,0,0,0.25)'
  };

  var styles = reactCSS({
    'default': {
      swatch: {
        width: '25px',
        height: '25px',
        fontSize: '0'
      }
    },
    'hover': {
      swatch: hoverSwatch
    }
  }, { hover: hover });

  return React.createElement(
    'div',
    { style: styles.swatch },
    React.createElement(Swatch, {
      color: color,
      onClick: onClick,
      onHover: onSwatchHover,
      focusStyle: hoverSwatch
    })
  );
};

export default handleHover(GithubSwatch);