added preserveAspectRatio To props (#36)

* added preserveAspectRatio To props

* updated README.md

Author: M-Izadmehr

README.md

@@ -61,6 +61,7 @@ const MyLoader = () => {
 | height | _Number_ | `130` | Height component |
 | primaryColor | _String_ | `#f3f3f3` | Background the SVG | 
 | secondaryColor | _String_ | `#ecebeb` | Animation color | 
+| preserveAspectRatio | _String_ | `xMidYMid meet` | Aspect ratio option of SVG| 
 
 
 **Custom element options:**

src/Wrap.js

@@ -19,7 +19,7 @@ const Wrap = (props: WrapProps): React.Element<*> => {
       height={props.height}
       version="1.1"
       style={props.style}
-      preserveAspectRatio="xMidYMid meet"
+      preserveAspectRatio={props.preserveAspectRatio}
     >
       <rect
         style={{ fill: `url(#${idGradient})` }}
@@ -64,4 +64,4 @@ const Wrap = (props: WrapProps): React.Element<*> => {
   )
 }
 
-export default Wrap
+export default Wrap

src/index.js

@@ -20,6 +20,7 @@ export type Props = {
   height: number,
   primaryColor: string,
   secondaryColor: string,
+  preserveAspectRatio:string,
 }
 
 type State = {
@@ -30,6 +31,7 @@ type State = {
   height: number,
   primaryColor: string,
   secondaryColor: string,
+  preserveAspectRatio: string,
 }
 
 class ContentLoader extends React.Component<Props, State> {
@@ -40,6 +42,7 @@ class ContentLoader extends React.Component<Props, State> {
     height: 130,
     primaryColor: '#f0f0f0',
     secondaryColor: '#e0e0e0',
+    preserveAspectRatio: 'xMidYMid meet',
   }
 
   constructor(props: Props) {
@@ -53,6 +56,7 @@ class ContentLoader extends React.Component<Props, State> {
       height: props.height,
       primaryColor: props.primaryColor,
       secondaryColor: props.secondaryColor,
+      preserveAspectRatio: props.preserveAspectRatio,
     }
   }
 
@@ -84,4 +88,4 @@ class ContentLoader extends React.Component<Props, State> {
 }
 
 export default ContentLoader
-export { Rect, Circle }
+export { Rect, Circle }