diff --git a/README.md b/README.md
index b176737..9cbdadb 100644
--- 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 (
-
-
- delay={25}
- duration={0.9} // Customize the animation duration (s).
- />
-
- )
- }
+function App(props) {
+ return (
+
+
+
+ )
+}
+```
+
+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 (
+
+ }
+ />
+
+ )
}
```
@@ -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
index b8026d0..5baff39 100644
--- 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
index cec731d..ce307a0 100644
--- 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 {
+export default class ShimmerImage extends React.Component {
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 {
}
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 {
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 {
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
+ if (fallback) {
+ return fallback
} else {
return (