Next.js template
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

IconButton.js 633B

1234567891011121314151617181920212223242526272829303132
  1. import React, { useRef } from 'react';
  2. import PropType from 'prop-types';
  3. const IconButton = ({ children, onClick, className }) => {
  4. const buttonRef = useRef(null);
  5. function handleClick() {
  6. buttonRef.current.blur();
  7. if (typeof onClick === 'function') {
  8. onClick();
  9. }
  10. }
  11. return (
  12. <button
  13. type="button"
  14. ref={buttonRef}
  15. onClick={handleClick}
  16. className={`c-icon-button ${className && className}`}
  17. >
  18. {children}
  19. </button>
  20. );
  21. };
  22. IconButton.propTypes = {
  23. children: PropType.node,
  24. onClick: PropType.func,
  25. className: PropType.string,
  26. };
  27. export default IconButton;