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 (