@muzikanto/picture NPM

Picture (material-ui)

npm.io

Introduction

Peer dependencies: react, react-dom, material-ui/core, material-ui/styles

Installation

npm i @muzikanto/picture
# or
yarn add @muzikanto/picture

Examples

Example in storybook

Base

function Component() {
  return (
     <Picture
        src={"your image url"}
        aspectRatio={16 / 9}
       />
  )
}

use image aspectRatio

function Component() {
    const [aspectRatio, setAspectRatio] = React.useState(16 / 10);
    
  return (
     <Picture
        src={"your image url"}
        aspectRatio={aspectRatio}
        onLoad={e => {
            setAspectRatio(e.currentTarget.naturalWidth / e.currentTarget.naturalHeight);
        }}
     />
  )
}

Advanced

const StyledPicture = withStyles(() => ({
    error: {
        color: 'red',
        fontSize: 50,
    },
}))(Picture)

function Component() {
  return (
     <Picture
        src={"your image url"}
        aspectRatio={16 / 9}
        onClick={(e) => alert('onClick')}
        onLoad={(e) => alert('onLoad')}
        onError={(e) => alert('onError')}
          
        renderLoading={() => ...Custom Loading Component}
        renderError={() => ...Custom Error Component}
       />
  )
}