ICommonProps typings adjusted to allow custom Components to be used with the as prop.

Updated documentation to reflect this

Author: Stephen Gibson

src/components/stories/Utils.tsx

@@ -82,9 +82,9 @@ export const StandardProps = () => (
 		<PropsHeader>Standard properties</PropsHeader>
 		<Prop
 			name="as"
-			type="string"
+			type="string | React.ComponentType<ICommonProps>"
 			default="div"
-			description="Allows control over the outputted HTML element allowing HTML 5 semantic markup to be created."
+			description="Allows control over the outputted HTML element either through HTML 5 semantic markup or a custom Component."
 		/>
 		<Prop
 			name="centerContent"

src/core-react.ts

@@ -15,7 +15,7 @@ export const commonProps = {
 	id: PropTypes.string,
 	className: PropTypes.string,
 	style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-	as: PropTypes.string,
+	as: PropTypes.any,
 	centerContent: PropTypes.oneOf([CenterType.None, CenterType.Vertical, CenterType.HorizontalVertical]),
 	zIndex: PropTypes.number,
 	scrollable: PropTypes.bool,

src/core-types.ts

@@ -1,3 +1,5 @@
+import React from "react";
+
 export enum Type {
 	ViewPort = "viewport",
 	Fixed = "fixed",
@@ -60,7 +62,7 @@ export interface ICommonProps extends IPassThroughEvents {
 	id?: string;
 	className?: string;
 	style?: React.CSSProperties;
-	as?: string;
+	as?: keyof React.ReactDOM | React.ComponentType<ICommonProps>;
 	centerContent?: CenterType;
 	zIndex?: number;
 	scrollable?: boolean;