Negligent Parachute Maintainers

    react-image-appear

    1.3.26 • Public • Published
    react-image-appear icon

    react-image-appear npm version NPM Downloads Build Status Patreon donate button

    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!

    react-image-appear

    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"
    />

    loader


    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
    />

    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"
    />

    placeholder-custom


    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"
    />

    animation

    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}
    />

    show-loader


    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

    Copyright (c) 2018 Arun Michael Dsouza (amdsouza92@gmail.com)

    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.

    Install

    npm i react-image-appear

    DownloadsWeekly Downloads

    469

    Version

    1.3.26

    License

    MIT

    Unpacked Size

    3.55 MB

    Total Files

    20

    Last publish

    Collaborators

    • amdsouza92