https://github.com/astrocoders/react-image-smooth-loading

[not maintained] Images which just flick to appear aren't cool. Images which appear smoothly with a fade like Instagram are cool
https://github.com/astrocoders/react-image-smooth-loading

css-in-js react react-animations smooth-image styled-components

Last synced: 3 months ago
JSON representation

[not maintained] Images which just flick to appear aren't cool. Images which appear smoothly with a fade like Instagram are cool

• Host: GitHub
• URL: https://github.com/astrocoders/react-image-smooth-loading
• Owner: Astrocoders
• License: mit
• Created: 2016-02-21T14:55:14.000Z (almost 9 years ago)
• Default Branch: develop
• Last Pushed: 2019-02-26T15:53:28.000Z (almost 6 years ago)
• Last Synced: 2024-04-30T00:45:30.892Z (9 months ago)
• Topics: css-in-js, react, react-animations, smooth-image, styled-components
• Language: JavaScript
• Homepage: https://astrocoders.dev/react-image-smooth-loading/
• Size: 475 KB
• Stars: 84
• Watchers: 6
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
ReactImg

========

React component for making your site images appear in a fade in.

See a [demo](http://astrocoders.com/react-image-smooth-loading/).

# Install

```

yarn add react-image-smooth-loading

```

_Note_: styled-components and react were added as peer dependencies.

If you don't have then you must install them as well.

```

yarn add react-image-smooth-loading styled-components react

```

# Usage

```js

import Img from 'react-image-smooth-loading'

// Define which placeholder to show while the image is loading

// Can be any image file.

// There's already a default one in base64, but you'd like to change ;)

Img.globalPlaceholder = '/images/placeholder.png'

export default function ImageList({ list }) {

  return (

    


      {list.map(url => (

        

          

          
My awesome image

        

      ))}

    

  )

}

```


Remember that Img is totally responsive, which means that it will fit accordingly

to the space given to it by its container.

## Options

```js

const props = {

  src: PropTypes.string.isRequired,

  placeholder: PropTypes.string, // Optional image placeholder, overrides globalPlaceholder,

  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),

  holderClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),

  placeholderProps: PropTypes.object,

  onClick: PropTypes.func,

  alt: PropTypes.string,

}



```