import classcraft from "classcraft";

const classes = classcraft("foo", { bar: true, baz: false });
console.log(classes); // Outputs: "foo bar"

import React from "react";
import classcraft from "classcraft";

function Button({ primary, disabled, children }) {
  return (
    <button
      className={classcraft(
        "button",
        { "button--primary": primary },
        { "button--disabled": disabled }
      )}
    >
      {children}
    </button>
  );
}

export default Button;

import React from "react";
import classcraft from "classcraft";

function Card({ featured, highlighted, darkMode, extraClass, children }) {
  return (
    <div
      className={classcraft(
        "card",
        { "card--featured": featured },
        { "card--highlighted": highlighted },
        { "card--dark": darkMode },
        extraClass // this could be a string or an object
      )}
    >
      {children}
    </div>
  );
}

export default Card;