Image

A responsive image component.

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, 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, Select, FlexItem, Flex, 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

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