jk-react-component-lib v0.1.5

Introduction

A simple showcase of component library.

In the future we can probably manage UI components in a separate package.

Components

This library provides four components:

• CustomAvatar
• CustomButton
• CustomCard
• CustomTooltip

You can customize the styles by passing values to customStyles prop.

CustomAvatar

const CustomAvatar = ({ imgSrc, altText, customStyles }) => {
  return (
    <img
      className={styles.customAvatar}
      style={{ customStyles }}
      src={imgSrc}
      alt={altText}
    />
  );
};

CustomButton

const CustomButton = ({ children, customStyles }) => {
  return (
    <button className={styles.customButton} style={customStyles}>
      {children}
    </button>
  );
};

CustomCard

CustomCard serves as more of a wrapper component. The component itself does not offer much of functionality.

const CustomCard = ({ children, customStyle }) => {
  return (
    <div className={styles.customCard} style={customStyle || {}}>
      {children}
    </div>
  );
};

CustomTooltip

const CustomTooltip = ({ children, label, customStyles }) => {
  const [tooltipToggle, setTooltipToggle] = useState(false);
  const onMouseEnter = () => setTooltipToggle(true);
  const onMouseLeave = () => setTooltipToggle(false);
  return (
    label && (
      <div className={styles.customTooltipOuterWrapper}>
        <div
          className={styles.customTooltipInnerWrapper}
          onMouseEnter={onMouseEnter}
          onMouseLeave={onMouseLeave}
        >
          {children}
          <span
            style={customStyles}
            className={
              tooltipToggle
                ? styles.customTooltipVisible
                : styles.customTooltipInvisible
            }
          >
            {label}
          </span>
        </div>
      </div>
    )
  );
};