https://github.com/cannercms/react-loading-image
A react image loader.
https://github.com/cannercms/react-loading-image
image-loader image-loading loading-spinner react
Last synced: about 1 month ago
JSON representation
A react image loader.
- Host: GitHub
- URL: https://github.com/cannercms/react-loading-image
- Owner: CannerCMS
- License: mit
- Created: 2018-03-07T10:06:58.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-06T07:54:32.000Z (over 6 years ago)
- Last Synced: 2024-10-29T07:23:03.236Z (7 months ago)
- Topics: image-loader, image-loading, loading-spinner, react
- Language: JavaScript
- Homepage: https://canner.github.io/react-loading-image/
- Size: 1.04 MB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-loading-image [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [](https://greenkeeper.io/)
> A react image loader component
## Installation
```sh
$ npm install --save react-loading-image
```
## Usage
```js
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null
};
}
onChange = (e) => {
this.setState({
value: e.target.value
});
}
render() {
const {value} = this.state;
return (
Copy a image URL here
value: {value}
{value && (
Loading...}
error={() => Error}
/>
)}
);
}
}
```
## Advanced
You might want to customized such as `
` as your final view, instead of `![]()
` tags, you can use `image` prop to replace any React element as you wish!
For example, using `styled-components`:
```js
import styled from 'styled-components';
const PreviewImg = styled.div`
background-image: url(${props => props.src});
width: 100%;
height: 300px;
background-size: contain;
background-repeat: no-repeat;
`;
class Demo extends React.Component {
...
render() {
const {value} = this.props;
return (
} // change to your customized component
loading={() => Loading...}
error={() => Error}
/>
);
}
}
```
## Props
| Name | Type | Default | Description |
| ------------ | ------- | ------- | ----------- |
| src | string | null | Image URL |
| style | style Object | null | Pass style object to set image's style |
| className | string | null | Set image's className |
| onLoad | (img: Image) => void | null | This function will be called when image is loaded |
| onError | (err: Event) => void | null | This function will be called when image is failed |
| loading | () => React.Element<*> | null | Return a React element that will show when image is loading |
| error | () => React.Element<*> | null | Return a React element that will show when image is crashed |
| image | ({src: string, width: number, height: number}) => React.Element<*> | null | Final result will render to this customized React element, if you don't assign this props default image will render into `
` |
## Start example server
```
npm start
```
## generate demo
```js
npm run gh-pages
```
## License
MIT © [chilijung](www.github.com/chilijung)
[npm-image]: https://badge.fury.io/js/react-loading-image.svg
[npm-url]: https://npmjs.org/package/react-loading-image
[travis-image]: https://travis-ci.org/Canner/react-loading-image.svg?branch=master
[travis-url]: https://travis-ci.org/Canner/react-loading-image
[daviddm-image]: https://david-dm.org/Canner/react-loading-image.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/Canner/react-loading-image