Kevin Powell - Community•2y ago

Atomic Design and React

I am following Brad Frost's Atomic Design principles in React and am wondering if I'm creating an antipattern. I have a Heading component that just renders a heading tag and some styling. Seems simple enough, but there are multiple different use cases for this simple Heading component, so I'm conditionally rendering jsx and styling based of a type property. This, however, can really bloat up my component and I'm wondering if I'm doing too much in one component. This is a simpler example but I have many other components like this in my project. Below is an example:

import { PropTypes } from "prop-types";
import styles from "./Heading.module.scss";

const Heading = ({ type, text }) => {
  if (type === "hero") {
    return <h1 className={styles.hero}>{text}</h1>;
  }

  if (type === "section") {
    return <h2 className={styles.section}>{text}</h1>;
  }

  if (type === "banner") {
    return <h2 className={styles.banner}>{text}</h1>;
  }

  if (type === "card") {
    return <h3 className={styles.card}>{text}</h1>;
  }
};

Heading.propTypes = {
  type: PropTypes.oneOf(["hero, section, banner, card"]).isRequired,
  text: PropTypes.string.isRequired,
};

export default Heading;

import { PropTypes } from "prop-types";
import styles from "./Heading.module.scss";

const Heading = ({ type, text }) => {
  if (type === "hero") {
    return <h1 className={styles.hero}>{text}</h1>;
  }

  if (type === "section") {
    return <h2 className={styles.section}>{text}</h1>;
  }

  if (type === "banner") {
    return <h2 className={styles.banner}>{text}</h1>;
  }

  if (type === "card") {
    return <h3 className={styles.card}>{text}</h1>;
  }
};

Heading.propTypes = {
  type: PropTypes.oneOf(["hero, section, banner, card"]).isRequired,
  text: PropTypes.string.isRequired,
};

export default Heading;

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Atomic Design and React