Introduce fallback loader prop with v2

gokcan · Mar 11, 2019 · c20226e · c20226e
1 parent 453e491
commit c20226e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -33,27 +33,47 @@
 npm i react-shimmer
 ```
 
+or
+
+```bash
+yarn add react-shimmer
+```
+
 ## Usage
 
 ```jsx
-import React, { Component } from 'react'
-
+import React from 'react'
 import Image from 'react-shimmer'
 
-export default class App extends Component {
-  render () {
-    return (
-      <div>
-        <Image 
-          src={'https://example.com/test.jpg'}
-          width={120} height={120}
-          style={{objectFit: 'cover'}} // Style your <img> 
-          delay={25}
-          duration={0.9} // Customize the animation duration (s).
-        />
-      </div>
-    )
-  }
+function App(props) {
+  return (
+    <div>
+      <Image
+        src="https://example.com/test.jpg"
+        width={640} height={480}
+        style={{ objectFit: 'cover' }}
+      />
+    </div>
+  )
+}
+```
+
+or you can use the `fallback` prop:
+
+```jsx
+import React from 'react'
+import Image from 'react-shimmer'
+import Spinner from './Spinner'
+
+function App(props) {
+  return (
+    <div>
+      <Image
+        src="https://example.com/test.jpg"
+        fallback={<Spinner />}
+      />
+    </div>
+  )
 }
 ```
 
@@ -63,19 +83,20 @@ Property | Type | Required | Default value | Description
 :--- | :--- | :--- | :--- | :---
 `src`|string|yes||
 `color`|string|no|`#f6f7f8`| Background color of the loader.
-`duration`|number|no|`1.6`| Animation duration (s) Higher value == slower animation. 
-`width`|number|yes||
-`height`|number|yes||
+`duration`|number|no|`1600`| Animation duration (ms) Higher value == slower animation.
+`width`|number|yes (no if `fallback` is present)||
+`height`|number|yes (no if `fallback` is present)||
 `style`|object|no||
 `onError`|func|no||
 `onLoad`|func|no||
-`loadingIndicatorSource`|string|no||
+`fallback`|React.Element|no||
 `delay`|number|no|| Delay the starting time of the animation. (ms)
 -----
 
 ## Contributing
 ---
-Feel free to send PRs. 
+
+Feel free to send PRs.
 
 ## License
 

diff --git a/package.json b/package.json
@@ -1,11 +1,10 @@
 {
   "name": "react-shimmer",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "A shared Image placeholder component that has a loading shimmer effect.",
   "author": "gokcan",
   "keywords": [
     "react",
-    "react-component",
     "reactjs",
     "loader",
     "loading-indicator",

diff --git a/src/web/index.js b/src/web/index.js
@@ -1,11 +1,11 @@
 // @flow
 /**
  * @class ShimmerImage
- * @version 1.2.0
+ * @version 2.0.0
  * @author github.com/gokcan
  */
 
-import React, { Component } from 'react'
+import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import cl from './styles.css'
 import 'regenerator-runtime/runtime'
@@ -21,7 +21,7 @@ type Props = {
   style?: Object,
   onError?: (err: string) => void,
   onLoad?: (image: Image) => void,
-  loadingIndicatorSource?: string,
+  fallback?: React.Element<*>,
   delay?: number,
 }
 
@@ -31,17 +31,17 @@ type State = {
   error?: string
 }
 
-export default class ShimmerImage extends Component<Props, State> {
+export default class ShimmerImage extends React.Component<Props, State> {
   static propTypes = {
     src: PropTypes.string.isRequired,
     color: PropTypes.string,
     duration: PropTypes.number,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number,
     style: PropTypes.object,
     onError: PropTypes.func,
     onLoad: PropTypes.func,
-    loadingIndicatorSource: PropTypes.string,
+    fallback: PropTypes.element,
     delay: PropTypes.number
   }
 
@@ -75,8 +75,8 @@ export default class ShimmerImage extends Component<Props, State> {
   }
 
   startImageLoadingProcess = async () => {
-    const { src, delay, width, height } = this.props
-    if (!(width && height)) {
+    const { src, delay, width, height, fallback } = this.props
+    if (!fallback && !(width & height)) {
       this.setState({ error: 'Height and Width props must be provided!' })
     }
     /*
@@ -147,7 +147,7 @@ export default class ShimmerImage extends Component<Props, State> {
 
   render() {
     const { src, error, isLoading } = this.state
-    const { width, height, color, duration, style, onError, loadingIndicatorSource, ...passed } = this.props
+    const { width, height, color, duration, style, onError, fallback, ...passed } = this.props
     const { ...passedStyles } = style
     const passedProps = { ...passed, ...{ src, width, height } }
     const backgroundSize = `${width * 10}px ${height}px`
@@ -156,15 +156,15 @@ export default class ShimmerImage extends Component<Props, State> {
       backgroundColor: color,
       backgroundSize,
       // $FlowFixMe
-      animationDuration: `${duration}s`
+      animationDuration: `${(duration / 1000).toFixed(1)}s`
     }
 
     if (error) {
       // $FlowFixMe
       return onError ? onError(error) : null
     } else if (isLoading) {
-      if (loadingIndicatorSource) {
-        return <img src={loadingIndicatorSource} />
+      if (fallback) {
+        return fallback
       } else {
         return (
           <div className={cl.shimmerdiv} style={{ ...passedStyles }}>