arunmichaeldsouza / react-image-appear Goto Github PK

View Code? Open in Web Editor NEW

281.0 17.0 16.0 4.51 MB

ReactJS component to make images appear with transition as they load.

License: MIT License

JavaScript 100.00%

image-transition loader placeholder image-loader placeholder-background css3-animations reactjs-component

react-image-appear's Introduction

react-image-appear

ReactJS component to make images appear with transition as they load.

Wraps an img within a placeholder element and adds a gif loader in between. No more ugly-looking progressively loading images!

This project has also been ported to AngularJS 1.x - ng-image-appear.

Installation

via npm

npm install react-image-appear --save

via yarn

yarn add react-image-appear

Usage

Import the component and provide the src with any of the available props.

import ReactImageAppear from 'react-image-appear';

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    animation="zoomIn"
    animationDuration="1s"
/>

Props

`src {string} | required`

The image source.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
/>

`className {string}`

Classes to be applied to the image.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    className="my-image"
/>

`loader {string}`

Adds a custom loader to the component. When not provided, applies a default one.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    loader="https://cache.dominos.com/nolo/ca/en/010048/assets/build/images/img/spinner.gif"
/>

`loaderStyle {object}`

Adds custom styling to the loader.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    loaderStyle={{ border: "2px solid red" }}
/>

`loaderClass {string}`

Adds CSS classes to the loader.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    loaderClass="my-loader"
/>

`placeholder {boolean | string}`

Adds a placeholder background to the component.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    placeholder
/>

You can override the default placeholder background and add your own by passing an image URL to this prop.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    placeholder="http://getuikit.com/docs/images/placeholder_600x400.svg"
/>

`placeholderStyle {object}`

Adds custom styling to the placeholder.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    placeholderStyle={{ border: "2px solid red", backgroundColor: 'black' }}
/>

`placeholderClass {string}`

Adds CSS classes to the placeholder.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    loaderClass="my-placeholder"
/>

`animation {string} | Default: fadeIn`

Add a CSS3 powered animation to the image as it appears.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    animation="bounceIn"
/>

react-image-appear has the following built-in CSS3 animations -

`fadeIn (default)`

`fadeInUp`

`fadeInRight`

`fadeInDown`

`fadeInLeft`

`bounceIn`

`bounceInUp`

`bounceInRight`

`bounceInDown`

`bounceInLeft`

`flipInX`

`flipInY`

`zoomIn`

`blurIn`

`blurInUp`

`blurInRight`

`blurInDown`

`blurInLeft`

`fillIn`

`animationDuration {string} | Default: 700ms`

Specifies the animation duration for the image to appear.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    animation="bounceIn"
    animationDuration="1s"
/>

`easing {string} | Default: ease-in-out`

Specifies the timing-function for the CSS3 powered animation.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    animation="bounceIn"
    easing="ease-in"
/>

`showLoader {boolean} | Default: true`

Specifies whether to show the loader or not.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    showLoader={false}
/>

`onClick {function}`

Callback to be called when the image is clicked.

<ReactImageAppear 
    src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg"
    onClick={handleImageClick}
/>

Testing

ReactImageAppear uses the jest test runner along with enzyme for easier assertion and manipulation. Run the following command to start the jest test runner -

npm test

Contributors

_{Arun Michael Dsouza}	_Patrick	_Stefan	_{Tim Carr}

Support

If you'd like to help support the development of the project, please consider backing me on Patreon -

License

MIT Licensed

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

react-image-appear's People

Contributors

Stargazers

Watchers

Forkers

saurabhpnwr mathewjohn rubythonode inkoln stnwk joshsten azarual trendingtechnology hungao tutanck zahinize lambdacollective pcw0002 xaphod vishwajeetraj11 faisalnazik

react-image-appear's Issues

Caching array.map images?

First of all this package stole like 3 hours of my life 😿

Not sure what the issue is and I dont plan to use this package anymore tbh, but when mapping an array of src's to ReactImageAppears if any elements are removed from the array the images do not accurately reflect the change. For example, if I have an array of 3 image src's and delete one, only the last index 'disappears'. It made it seem as if my code was only deleting the last index, when in reality it seems the initial load was cached and if any elements were removed, it still rendered the old values

Images loaded, loader doesn't disappear.

Hi! I have a problem with this component. the loading gif/placeholder isn't disappearing once the image has loaded.

My steps:

Web loads.
Async content API request starts.
When the content is ready, creates a few ReactImageAppear elements with the API provided src.
Loader gif appears.
When the image loads, it's placed behind the loader gif.
Loading gif doesn't disappear.

Cannot use import statement outside a module

Hello, I'm creating a blog with React / Next.js.
The problem below occurred when loading images. Is there any idea to solve this?

Error message:

/path/to/node_modules/react-image-appear/src/ReactImageAppear.js:7
import React, { Component } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.react-image-appear (/path/to/.next/server/pages/blog.js:751:18)
    at __webpack_require__ (/path/to/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/blog/index.tsx:12:76)
    at Object../src/pages/blog/index.tsx (/path/to/.next/server/pages/blog.js:535:1)
    at __webpack_require__ (/path/to/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/path/to/.next/server/pages/blog.js:815:52)
    at /path/to/.next/server/pages/blog.js:816:28
    at Object.<anonymous> (/path/to/.next/server/pages/blog.js:819:3)
    at Module._compile (internal/modules/cjs/loader.js:999:30)

How to set Width and Height of image.

Is there any way to set the height and width of a loaded image?

Can´t find variable: document

after install component app shows error "Can´t find variable: document",

I want to use Inline Style in the component but it doesn't work

npm run build on the default CRA doesn't know how to build this into the bundle.

It expects the module to already be compiled (/lib/**.js). I did a fixed version here: https://github.com/joshsten/react-image-appear, however I still haven't been able to finish getting the jest tests working again.

Placeholder background appear when using border-radius

File location: ./src/constants.js

I have website with dark background and it's very ugly when the img loads with smoked white background. Also, there is an issue when using ReactImageAppear with mozila firefox. Wen made the img with border radius the placeholder backgroud showing off sides.

Here is a photo of the issue: Link

I bolded the line that I think cousing me problems. I think it will be beneficial for many developers if the placeholder doesn't have backgrond and or if there is posability to change it via props.

PLACEHOLDER_STYLE = {
position: 'relative',
display: 'inline-block',
backgroundColor: '#f0f0f0',
backgroundPosition: 'center center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'

loader disappear on auto width and height image

any solution for keep the loader shown on auto with and height image? maybe some props to determine if the image already loaded so i can change the width/height to auto from static number

Image stays the same after src is changed

Probably the component is not reacting to props being changed, so if i use this for a slider or something where the src={} changes, it stays the same. I would say this is a pretty big problem.

Failed to build

npm run -script build

Failed to minify the code from this file:

./node_modules/react-image-appear/src/ReactImageAppear.js:10

How do you dimension this?

I'm new to ReactJS but I found this component incredibly difficult to style (the resulting image). Might be helpful to add to the readme how to style the image, I could not figure it out so I'm using the regular

Failed to minify the code from this file

When I try to build, it says:

Failed to minify the code from this file:
        ./node_modules/react-image-appear/src/ReactImageAppear.js:16

React version: 16.8.3
React scripts: 2.1.1

onClick prop is not passed down to the <img> element

I was trying to pass an onClick prop down to the underlying element, but looking through the code it looks like the onClick prop is never destructured and passed down. Are there any plans in the future to implement this? I'm happy to open a PR for it if needed.

loader icon shows

Sometimes it shows the loader icon when the image is already loaded.

caching issue maybe?

Placeholder shows underneath image after image is loaded

See screenshot.
Fixed in #19

arunmichaeldsouza / react-image-appear Goto Github PK

react-image-appear's Introduction

react-image-appear

Installation

via npm

via yarn

Usage

Props

src {string} | required

className {string}

loader {string}

loaderStyle {object}

loaderClass {string}

placeholder {boolean | string}

placeholderStyle {object}

placeholderClass {string}

animation {string} | Default: fadeIn

fadeIn (default)

fadeInUp

fadeInRight

fadeInDown

fadeInLeft

bounceIn

bounceInUp

bounceInRight

bounceInDown

bounceInLeft

flipInX

flipInY

zoomIn

blurIn

blurInUp

blurInRight

blurInDown

blurInLeft

fillIn

animationDuration {string} | Default: 700ms

easing {string} | Default: ease-in-out

showLoader {boolean} | Default: true

onClick {function}

Testing

Contributors

Support

License

react-image-appear's People

Contributors

Stargazers

Watchers

Forkers

react-image-appear's Issues

Recommend Projects

Recommend Topics

Recommend Org

`src {string} | required`

`className {string}`

`loader {string}`

`loaderStyle {object}`

`loaderClass {string}`

`placeholder {boolean | string}`

`placeholderStyle {object}`

`placeholderClass {string}`

`animation {string} | Default: fadeIn`

`fadeIn (default)`

`fadeInUp`

`fadeInRight`

`fadeInDown`

`fadeInLeft`

`bounceIn`

`bounceInUp`

`bounceInRight`

`bounceInDown`

`bounceInLeft`

`flipInX`

`flipInY`

`zoomIn`

`blurIn`

`blurInUp`

`blurInRight`

`blurInDown`

`blurInLeft`

`fillIn`

`animationDuration {string} | Default: 700ms`

`easing {string} | Default: ease-in-out`

`showLoader {boolean} | Default: true`

`onClick {function}`