11.12.1
A responsive image component.
import React from 'react' import Image from '../_image' const RoundedImage = (props) => { return ( <> <br /> <div> <Image alt="" rounded size="xs" url="https://unsplash.it/500/400/?image=634" {...props} /> </div> <div> <Image alt="" rounded size="sm" url="https://unsplash.it/500/400/?image=634" {...props} /> </div> <div> <Image alt="" rounded size="md" url="https://unsplash.it/500/400/?image=634" {...props} /> </div> <div> <Image alt="" rounded size="lg" url="https://unsplash.it/500/400/?image=634" {...props} /> </div> <div> <Image alt="" rounded size="xl" url="https://unsplash.it/500/400/?image=634" {...props} /> </div> </> ) } export default RoundedImage
import React from 'react' import Image from '../_image' import Body from '../../pb_body/_body' 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" {...props} /> <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" {...props} /> <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" {...props} /> <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" {...props} /> </> ) } 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 '../_image' import Select from '../../pb_select/_select' import FlexItem from '../../pb_flex/_flex_item' import Flex from '../../pb_flex/_flex' import Button from '../../pb_button/_button' 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} {...props} /> </FlexItem> <FlexItem> <Button disabled={transition === '' ? true : false} marginLeft="sm" onClick={loadImage} text="Load Image" {...props} /> </FlexItem> </Flex> <div style={{ display: apply.url === '' ? 'none' : 'block' }}> <Image alt="picture of a misty forest" className="image" transition={apply.transition} url={apply.url} {...props} /> </div> </> ) } export default TransitionImage