allow custom styles

Author: jonmajorc

src/index.test.js

@@ -17,3 +17,18 @@ it("should render the required number of skeletons", () => {
 
   expect(skeletonElements.length).toBe(4);
 });
+
+it("should render a skeleton with styles", () => {
+  const style = { boarderRadius: 10, height: 50, width: 50 };
+  const skeleton = mount(<Skeleton style={style} />);
+  expect(skeleton.find(skeletonSelector).prop("style")).toEqual(style);
+});
+
+it("inline style prop should overwrite custom styles", () => {
+  const style = { boarderRadius: 10, height: 50, width: 50 };
+  const skeleton = mount(<Skeleton height={100} style={style} />);
+  expect(skeleton.find(skeletonSelector).prop("style")).toEqual({
+    ...style,
+    height: 100,
+  });
+});

src/skeleton.js

@@ -36,7 +36,8 @@ export default function Skeleton({
   width,
   wrapper: Wrapper,
   height,
-  circle
+  circle,
+  style: customStyle,
 }) {
   const elements = [];
 
@@ -63,7 +64,10 @@ export default function Skeleton({
           ${skeletonStyles}
           animation: ${skeletonKeyframes} ${duration}s ease-in-out infinite
         `}
-        style={style}
+        style={{
+          ...customStyle,
+          ...style,
+        }}
       >
         ‌
       </span>

stories/Skeleton.story.js

@@ -99,6 +99,12 @@ storiesOf("Skeleton", module)
       <Skeleton count={1} height="50em" />
     </div>
   ))
+  .add("Skeleton with styles", () => (
+    <Skeleton
+      height="100px"
+      style={{ boarderRadius: 10, height: 50, width: 50 }}
+    />
+  ))
   .add("Skeleton displayed as circle", () => (
     <div style={{ display: "flex", flexDirection: "column" }}>
       <Skeleton count={1} height={50} width={50} circle={true} />