BubPill as PureComponent, BubPill as functional component with hooks

bub_pill_as_pure_component.jsx

import classNames from "classnames";

import "stylesheets/shared/components/bub_pill";

export class BubPill extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      hovered: false,
    };

    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);
    this.onClick = this.onClick.bind(this);
  }

  onMouseOver() {
    this.setState({ hovered: true });
  }

  onMouseOut() {
    this.setState({ hovered: false });
  }

  onClick(e) {
    this.setState({ hovered: false });
    this.props.handleClick(e);
  }

  render() {
    const className = classNames(
      'bub-pill',
      this.props.active ? 'active' : '',
      this.props.size,
      this.state.hovered ? "hover" : "",
    );

    return (
      <button
        className={className}
        onClick={this.onClick}
        onMouseOver={this.onMouseOver}
        onMouseOut={this.onMouseOut}
        onFocus={this.onMouseOver}
        onBlur={this.onMouseOut}
      >
        {this.props.label}
      </button>
    );
  }
}

BubPill.propTypes = {
  active: PropTypes.bool,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  label: PropTypes.string,
  handleClick: PropTypes.func,
};

BubPill.defaultProps = {
  active: false,
  label: '',
  size: "medium",
  handleClick: _.noop,
};

bub_pill_with_hooks.jsx

import classNames from "classnames";
import { useState } from 'react';

import "stylesheets/shared/components/bub_pill";

export const BubPill = props => {
  const [isHovering, setHovered] = useState(false);

  const onMouseOver = () => {
    setHovered(true);
  };

  const onMouseOut = () => {
    setHovered(false);
  };

  const onClick = e => {
    setHovered(false);
    props.handleClick(e);
  };

  const className = classNames(
    'bub-pill',
    props.active ? 'active' : '',
    props.size,
    isHovering ? "hover" : "",
  );

  return (
    <button
      className={className}
      onClick={onClick}
      onMouseOver={onMouseOver}
      onMouseOut={onMouseOut}
      onFocus={onMouseOver}
      onBlur={onMouseOut}
    >
      {props.label}
    </button>
  );
};

BubPill.propTypes = {
  active: PropTypes.bool,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  label: PropTypes.string,
  handleClick: PropTypes.func,
};

BubPill.defaultProps = {
  active: false,
  label: '',
  size: "medium",
  handleClick: _.noop,
};