fix: Dynamic HTML Tag Names for Level/Container (#147)

* HTML tag type

* working fix for tag prop type

* node name fix

* level component dynamic HTML

* better docs on useDidMount

src/components/container/Container.test.tsx

@@ -35,3 +35,10 @@ it("renders in non-fluid mode by default", () => {
   const container = screen.getByText(message);
   expect(container).not.toHaveClass("is-fluid");
 });
+
+it("can be rendered as a different HTML element", () => {
+  const message = "This is a test container. Cool!";
+  render(<Container as="section">{message}</Container>);
+  const container = screen.getByText(message);
+  expect(container.nodeName).toEqual("SECTION");
+});

src/components/container/Container.tsx

@@ -1,10 +1,12 @@
 import { PropsWithChildren } from "react";
+import { HTMLTag } from "../../types";
 import {
   ClassNameTransformMap,
   createClassNameFromProps,
 } from "../../utilities";
 
 export type ContainerProps = PropsWithChildren<{
+  as?: HTMLTag;
   fluid?: boolean;
   className?: string;
 }>;
@@ -13,6 +15,7 @@ const containerClassNameMapping: ClassNameTransformMap<ContainerProps> =
   new Map([["fluid", () => "is-fluid"]]);
 
 export const Container = ({
+  as: Comp = "div",
   children,
   className = "",
   ...classNameProps
@@ -23,5 +26,5 @@ export const Container = ({
     ["container", className]
   );
 
-  return <div className={mappedClassName}>{children}</div>;
+  return <Comp className={mappedClassName}>{children}</Comp>;
 };

src/components/level/Level.test.tsx

@@ -30,3 +30,8 @@ it("can render content on the right", () => {
   render(<Level right={right} />);
   expect(screen.getByText(right)).toHaveClass("level-right");
 });
+
+it("can be rendered as a different HTML element besides a div", () => {
+  render(<Level as="header">Level</Level>);
+  expect(screen.getByText("Level").nodeName).toEqual("HEADER");
+});

src/components/level/Level.tsx

@@ -1,10 +1,12 @@
 import { PropsWithChildren, ReactNode } from "react";
+import { HTMLTag } from "../../types";
 import {
   ClassNameTransformMap,
   createClassNameFromProps,
 } from "../../utilities";
 
 export type LevelProps = PropsWithChildren<{
+  as?: HTMLTag;
   left?: ReactNode;
   right?: ReactNode;
   mobile?: boolean;
@@ -15,6 +17,7 @@ const classNameMap: ClassNameTransformMap<LevelProps> = new Map([
 ]);
 
 export const Level = ({
+  as: Comp = "div",
   left,
   right,
   children,
@@ -27,10 +30,10 @@ export const Level = ({
   );
 
   return (
-    <div className={className}>
+    <Comp className={className}>
       {left && <div className="level-left">{left}</div>}
       {children}
       {right && <div className="level-right">{right}</div>}
-    </div>
+    </Comp>
   );
 };

src/hooks/lifecycle/use-did-mount.ts

@@ -1,12 +1,16 @@
+// specific ESLint disable. This hook is built
+// to get past this specific check that should be used
+// in other React code.
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect } from "react";
+
+import { EffectCallback, useEffect } from "react";
 
 /**
  * useDidMount hook
  * Calls a function on mount
  *
  * @param {Function} callback Callback function to be called on mount
  */
-export const useDidMount = (callback: () => void): void => {
+export const useDidMount = (callback: EffectCallback): void => {
   useEffect(callback, []);
 };

src/types/html/HTMLTag.ts

@@ -0,0 +1 @@
+export type HTMLTag = keyof JSX.IntrinsicElements;

src/types/html/index.ts

@@ -0,0 +1 @@
+export * from "./HTMLTag";

src/types/index.ts

@@ -2,6 +2,7 @@ export * from "./alert";
 export * from "./color";
 export * from "./direction";
 export * from "./form";
+export * from "./html";
 export * from "./position";
 export * from "./size";
 export * from "./typography";