Nevertheless! Party Metaphorically

    boundless-image

    1.1.0 • Public • Published

    Image

    Installation

    npm i boundless-image --save

    Then use it like:

    /** @jsx createElement */
     
    import { createElement, PureComponent } from 'react';
    import Button from 'boundless-button';
    import Image from 'boundless-image';
     
    export default class ImageDemo extends 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

    You can see what variables are available to override in variables.styl.

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

    Install

    npm i boundless-image

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • sighrobot