Added named exports and removed type prop (#72)

Author: Andarist

README.md

@@ -32,9 +32,10 @@ Npm: `$ npm i react-content-loader --save`
 
 ```jsx
 // import the component
-import ContentLoader from 'react-content-loader'
+import ContentLoader, { Facebook } from 'react-content-loader'
 
-const MyLoader = () => <ContentLoader type="facebook" />
+const MyLoader = () => <ContentLoader />
+const MyFacebookLoader = () => <Facebook />
 ```
 
 **Or in custom mode, using the
@@ -55,7 +56,6 @@ const MyLoader = () => (
 
 | Name                | Type     | Default         | Description                                                     |
 | ------------------- | -------- | --------------- | --------------------------------------------------------------- |
-| type                | _String_ | `facebook`      | Options: `facebook`, `instagram`, `list`, `bullet-list`, `code` |
 | speed               | _Number_ | `2`             | Animation speed                                                 |
 | width               | _Number_ | `400`           | **viewBox** width of SVG                                        |
 | height              | _Number_ | `130`           | **viewBox** height of SVG                                       |

src/Wrap.js

@@ -8,6 +8,15 @@ export type WrapProps = {
   children?: React.ChildrenArray<*>,
 } & ContentLoaderProps
 
+export const defaultProps = {
+  speed: 2,
+  width: 400,
+  height: 130,
+  primaryColor: '#f0f0f0',
+  secondaryColor: '#e0e0e0',
+  preserveAspectRatio: 'xMidYMid meet',
+}
+
 const Wrap = (props: WrapProps): React.Element<*> => {
   const idClip = uid()
   const idGradient = uid()

src/index.js

@@ -1,13 +1,13 @@
 //@flow
 import * as React from 'react'
 
-import Wrap from './Wrap'
+import Wrap, { defaultProps } from './Wrap'
 // Stylized
-import FacebookStyle from './stylized/FacebookStyle'
-import InstagramStyle from './stylized/InstagramStyle'
-import CodeStyle from './stylized/CodeStyle'
-import ListStyle from './stylized/ListStyle'
-import BulletListStyle from './stylized/BulletListStyle'
+export { default as Facebook } from './stylized/FacebookStyle'
+export { default as Instagram } from './stylized/InstagramStyle'
+export { default as Code } from './stylized/CodeStyle'
+export { default as List } from './stylized/ListStyle'
+export { default as BulletList } from './stylized/BulletListStyle'
 
 export type Props = {
   style: { [key: string]: any },
@@ -22,38 +22,11 @@ export type Props = {
 }
 
 const ContentLoader = (props: Props) => {
-  if (props.children) {
-    return <Wrap {...props}>{props.children}</Wrap>
-  }
-
-  switch (props.type.toLowerCase()) {
-    case 'instagram':
-      return <InstagramStyle {...props} />
-
-    case 'code':
-      return <CodeStyle {...props} />
-
-    case 'list':
-      return <ListStyle {...props} />
-
-    case 'bullet-list':
-      return <BulletListStyle {...props} />
-
-    default:
-    case 'facebook':
-      return <FacebookStyle {...props} />
-  }
+  const mergedProps = { ...defaultProps, ...props }
+  const children = props.children
+    ? props.children
+    : <rect x="0" y="0" rx="5" ry="5" width={mergedProps.width} height={mergedProps.height} />
+  return <Wrap {...mergedProps}>{children}</Wrap>
 }
 
-ContentLoader.defaultProps = {
-  type: 'facebook',
-  speed: 2,
-  width: 400,
-  height: 130,
-  primaryColor: '#f0f0f0',
-  secondaryColor: '#e0e0e0',
-  preserveAspectRatio: 'xMidYMid meet',
-  className: '',
-};
-
 export default ContentLoader

src/stylized/BulletListStyle.js

@@ -1,10 +1,10 @@
 //@flow
 import * as React from 'react'
-import Wrap from '../Wrap'
+import Wrap, { defaultProps } from '../Wrap'
 import type { WrapProps } from '../Wrap'
 
 const BulletListStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...props}>
+  <Wrap {...defaultProps} {...props} >
     <circle cx="10" cy="20" r="8" />
     <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
     <circle cx="10" cy="50" r="8" />

src/stylized/CodeStyle.js

@@ -1,10 +1,10 @@
 //@flow
 import * as React from 'react'
-import Wrap from '../Wrap'
+import Wrap, { defaultProps } from '../Wrap'
 import type { WrapProps } from '../Wrap'
 
 const CodeStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...props}>
+  <Wrap {...defaultProps} {...props} >
     <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
     <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
     <rect x="190" y="0" rx="3" ry="3" width="10" height="10" />

src/stylized/FacebookStyle.js

@@ -1,10 +1,10 @@
 //@flow
 import * as React from 'react'
-import Wrap from '../Wrap'
+import Wrap, { defaultProps } from '../Wrap'
 import type { WrapProps } from '../Wrap'
 
 const FacebookStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...props}>
+  <Wrap {...defaultProps} {...props} >
     <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
     <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
     <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />

src/stylized/InstagramStyle.js

@@ -1,10 +1,10 @@
 //@flow
 import * as React from 'react'
-import Wrap from '../Wrap'
+import Wrap, { defaultProps } from '../Wrap'
 import type { WrapProps } from '../Wrap'
 
 const InstagramStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...props} height={480}>
+  <Wrap {...defaultProps} {...props} height={480}>
     <circle cx="30" cy="30" r="30" />
 
     <rect x="75" y="13" rx="4" ry="4" width="100" height="13" />

src/stylized/ListStyle.js

@@ -1,10 +1,10 @@
 //@flow
 import * as React from 'react'
-import Wrap from '../Wrap'
+import Wrap, { defaultProps } from '../Wrap'
 import type { WrapProps } from '../Wrap'
 
 const ListStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...props}>
+  <Wrap {...defaultProps} {...props}>
     <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
     <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
     <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />

stories/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { storiesOf } from '@storybook/react'
 
-import ContentLoader from '../src/index'
+import ContentLoader, { Facebook, Instagram, Code, List, BulletList } from '../src/index'
 
 let defaultStyle = {
   width: 400,
@@ -25,27 +25,27 @@ const MyLoader = () => {
 storiesOf('ContentLoader', module)
   .add('facebook style', () => (
     <Container>
-      <ContentLoader />
+      <Facebook />
     </Container>
   ))
   .add('instagram style', () => (
     <Container>
-      <ContentLoader type="instagram" />
+      <Instagram />
     </Container>
   ))
   .add('code style', () => (
     <Container>
-      <ContentLoader type="code" />
+      <Code />
     </Container>
   ))
   .add('list style', () => (
     <Container>
-      <ContentLoader type="list" />
+      <List />
     </Container>
   ))
   .add('bullet list style', () => (
     <Container>
-      <ContentLoader type="bullet-list" />
+      <BulletList />
     </Container>
   ))
   .add('custom style', () => (

tests/index.js

@@ -11,46 +11,8 @@ Enzyme.configure({ adapter: new Adapter() })
 chai.use(chaiEnzyme())
 
 import ContentLoader from '../src/index'
-import FacebookStyle from '../src/stylized/FacebookStyle'
-import InstagramStyle from '../src/stylized/InstagramStyle'
-import CodeStyle from '../src/stylized/CodeStyle'
 
 describe('<ContentLoader />:', () => {
-  describe('Type props are used', () => {
-    describe('when type is facebook', () => {
-      const wrapper = mount(<ContentLoader type={'facebook'} />)
-
-      it('should render <FacebookStyle />', () => {
-        expect(wrapper).to.have.descendants(FacebookStyle)
-      })
-    })
-
-    describe('when type is instagram', () => {
-      const wrapper = mount(<ContentLoader type={'instagram'} />)
-
-      it('should render <InstagramStyle />', () => {
-        expect(wrapper).to.have.descendants(InstagramStyle)
-      })
-    })
-
-    describe('when type is code', () => {
-      const wrapper = mount(<ContentLoader type={'code'} />)
-
-      it('should render <CodeStyle />', () => {
-        expect(wrapper).to.have.descendants(CodeStyle)
-      })
-    })
-
-    describe('when type is undefined', () => {
-      const wrapper = mount(<ContentLoader />)
-
-      it('should render <FacebookStyle />', () => {
-        expect(wrapper).to.have.descendants(FacebookStyle)
-      })
-    })
-
-  })
-
   describe('when type is custom', () => {
 
     const wrapper = mount(