Add the ability to rename the html tag (#269)

Author: devinschulz

README.md

@@ -31,14 +31,15 @@ class Example extends React.Component {
 ## 👀 Properties
 
 | Property       | Attribute       | Description             | Type      | Default     |
-| -------------- | --------------- | ----------------------- | --------- | ----------- |
+|----------------|-----------------|-------------------------|-----------|-------------|
 | `width`        | `width`         | Loader Width            | `string`  | `"100%"`    |
 | `height`       | `height`        | Loader Height           | `string`  | `"1em"`     |
 | `background`   | `background`    | Loader background color | `string`  | `"#eff1f6"` |
 | `circle`       | `circle`        | Make Skeleton Circle    | `boolean` | `false`     |
 | `borderRadius` | `border-radius` | Loader radius           | `string`  | `"4px"`     |
-| `block`        | `block`         | Whether to start new    | `boolean` | `true`     |
+| `block`        | `block`         | Whether to start new    | `boolean` | `true`      |
 | `style`        | `style`         | Extra Styles            | `object`  | `{}`        |
+| `as`           | --              | The HTML element        | `string`  | `"div"`     |
 
 ## License
 

src/index.tsx

@@ -10,6 +10,7 @@ interface SkeletonLoaderProps {
   circle?: boolean;
   block?: boolean;
   style?: React.CSSProperties;
+  as?: keyof JSX.IntrinsicElements
 }
 
 function SkeletonLoader({
@@ -20,9 +21,10 @@ function SkeletonLoader({
   circle = false,
   block = true,
   style = {},
+  as: Tag = "div",
 }: SkeletonLoaderProps) {
   return (
-    <div
+    <Tag
       className={css.skeleton}
       style={{
         width,
@@ -34,7 +36,7 @@ function SkeletonLoader({
       }}
     >
       &zwnj;
-    </div>
+    </Tag>
   );
 }