import React from 'react';

import Colours from '../../modules/colours';

const Colour = (props) => {
  var colour = props.colour;

  if (props.format === 'rgb') {
    var rgb = Colours.hexToRgb(colour.substring(1, 7));

    colour = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
  }

  return (
    <h2 className='colours__hex copy' data-clipboard-text={colour}>{colour}</h2>
  );
};

export default Colour;

import React from 'react';

import Colours from '../../modules/colours';

const Colour = (props) => {
  var colour = props.colour;

  if (props.format === 'rgb') {
    var rgb = Colours.hexToRgb(colour.substring(1, 7));

    colour = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
  }

  return (
    <h2 className='colours__hex'>
      <span className='copy' data-clipboard-text={colour}>{colour}</span>
    </h2>
  );
};

export default Colour;

Make only the colour code the copy region instead of entire row
Make only the colour code the copy region instead of entire row
