boundless-image

Image

An image block with placeholder support for loading and fallback scenarios.

Installation

npm i boundless-image --save

Then use it like:

import React from 'react';
import Button from 'boundless-button';
import Image from 'boundless-image';

export default class ImageDemo extends React.PureComponent {
    state = {
        normal: Date.now(),
        delayed: Date.now(),
        error: Date.now(),
    }

    remountImage(refName) {
        this.setState({[refName]: Date.now()});
    }

    render() {
        return (
            <div className='demo-image spread center'>
                <figure>
                    <h5>Normal</h5>
                    <Image
                        ref='normal'
                        src={`https://c2.staticflickr.com/6/5128/5288605976_9b06c0de8f_b.jpg?${this.state.normal}`}
                        alt='A snowy drive.' />
                    <Button
                        onPressed={this.remountImage.bind(this, 'normal')}
                        style={{marginTop: '1rem'}}>
                        Remount Image
                    </Button>
                </figure>

                <figure>
                    <h5>Delayed</h5>
                    <Image
                        ref='delayed'
                        src={`http://deelay.me/5000/http://igcdn-photos-g-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11244434_646274218842534_532892887_n.jpg?${this.state.delayed}`}
                        alt='An aerial shot of a snow-covered forest.' />
                    <Button onPressed={this.remountImage.bind(this, 'delayed')}
                              style={{marginTop: '1rem'}}>
                        Remount Image
                    </Button>
                </figure>

                <figure>
                    <h5>Errored Out</h5>
                    <Image
                        ref='error'
                        src={`http://www.flickr.com/1o2k3ok1231?${this.state.error}`}
                        alt='A dead image.' />
                    <Button
                        onPressed={this.remountImage.bind(this, 'error')}
                        style={{marginTop: '1rem'}}>
                        Remount Image
                    </Button>
                </figure>
            </div>
        );
    }
}

Image can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Image } from 'boundless';

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

• src ・ a valid path to the desired image

  Expects | Default Value

  •   | -
    

  string | 'about:blank'

Optional Props

• * ・ any React-supported attribute

  Expects | Default Value

  •   | -
    

  any | n/a

• alt ・ a written description of the image for search engines, hovertext and those using accessibility technologies

  Expects | Default Value

  •   | -
    

  string | ''

• component ・ overrides the component HTML tag

  Expects | Default Value

  •   | -
    

  string | 'div'

Reference Styles

Stylus

// Bring in Boundless's base Stylus variables
@require "node_modules/boundless-image/variables"

// Redefine any variables as desired, e.g.
color-accent = royalblue

// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-image/style"

CSS

If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css, based on Boundless's default variables.