12.24.0
A responsive image component.
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
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
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
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