Image

A responsive image component.

See this kit in action in our sample UI

Default

import React from 'react'

import Image from 'playbook-ui'

const DefaultImage = (props) => {
  return (
    <>
      <br />
      <div>
        <Image
            alt="picture of a misty forest"
            size="xs"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt="picture of a misty forest"
            size="sm"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt="picture of a misty forest"
            size="md"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt="picture of a misty forest"
            size="lg"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt="picture of a misty forest"
            size="xl"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt="picture of a misty forest"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
    </>
  )
}

export default DefaultImage

Rounded

import React from 'react'

import Image from 'playbook-ui'

const RoundedImage = (props) => {
  return (
    <>
      <br />
      <div>
        <Image
            alt=""
            rounded
            size="xs"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt=""
            rounded
            size="sm"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt=""
            rounded
            size="md"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt=""
            rounded
            size="lg"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
      <div>
        <Image
            alt=""
            rounded
            size="xl"
            url="https://unsplash.it/500/400/?image=634"
        />
      </div>
    </>
  )
}

export default RoundedImage

Error Handling

import React from 'react'

import Image from 'playbook-ui'

import Body from 'playbook-ui'

const CustomErrorImage = (props) => {
  return (
    <>
      <Body text="Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time." />
      <br />
      <Body text="Alter the display when the image fails to load:" />
      <Image
          alt="This is the alt text!"
          onError={(e) => e.target.style.color = 'red'}
          rounded
          size="xs"
          url="not_a_valid_url"
      />
      <br />
      <br />
      <Body text="Give it an error class:" />
      <Image
          alt="This is the alt text!"
          onError={(e) => e.target.classList.add('image-error')}
          rounded
          size="sm"
          url="not_a_valid_url"
      />
      <br />
      <br />
      <Body text="Set an inline style" />
      <Image
          alt="This is the alt text!"
          onError={(e) => e.target.style.outline = '1px solid red'}
          rounded
          size="md"
          url="not_a_valid_url"
      />
      <br />
      <br />
      <Body text="Hide it completely!" />
      <Image
          alt="This is the alt text!"
          onError={(e) => e.target.style.display = 'none'}
          rounded
          size="md"
          url="not_a_valid_url"
      />
    </>
  )
}

export default CustomErrorImage

Transition

To add a transition, simply use the transition prop and one of the three string options "fade", "blur", or "scale".

import React, { useState } from 'react'

import Image from 'playbook-ui'
import Select from 'playbook-ui'
import FlexItem from 'playbook-ui'
import Flex from 'playbook-ui'
import Button from 'playbook-ui'

const TransitionImage = (props) => {
  const [transition, setTransition] = useState('')
  const [apply, setApply] = useState({
    url: '',
    transition: '',
  })

  const loadImage = () => {
    document.querySelector('.image').classList.remove(transition, 'lazyloaded')
    setApply({
      url: 'https://unsplash.it/500/400/?image=634',
      transition: transition,
    },
    document.querySelector('.image').classList.add(transition, 'lazyload')
    )
  }

  const handleTransition = ({ target }) => {
    setTransition(target.value)
  }

  const options = [
    {
      value: 'fade',
    },
    {
      value: 'blur',
    },
    {
      value: 'scale',
    },
  ]

  return (
    <>
      <Flex>
        <FlexItem fixedSize="250px">
          <Select
              blankSelection="Select a Transition..."
              label=""
              onChange={handleTransition}
              options={options}
          />
        </FlexItem>
        <FlexItem>
          <Button
              disabled={transition === '' ? true : false}
              marginLeft="sm"
              onClick={loadImage}
              text="Load Image"
          />
        </FlexItem>
      </Flex>
      <div style={{ display: apply.url === '' ? 'none' : 'block' }}>
        <Image
            alt="picture of a misty forest"
            className="image"
            transition={apply.transition}
            url={apply.url}
        />
      </div>
    </>
  )
}

export default TransitionImage

UI Samples using Image Kit

Get the full picture. See how this kit is used in our samples.

News Magazine

Crowdsourced Posts

Music App

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat