Package Exports
- @lyra/imagetool
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lyra/imagetool) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
The image tool used in lyra
Getting started
npm install --save @lyra/imagetoolUsage
ImageTool widget
import React from 'react'
import ImageTool from '@lyra/imagetool'
class MyComponent extends React.Component {
state = {
value: {
hotspot: {
x: 0.4,
y: 0.3,
height: 0.6,
width: 0.4
},
crop: {
left: 0.1,
right: 0.2,
top: 0.1,
bottom: 0.21
}
}
}
handleImageToolchange = newValue => {
this.setState({value: newValue})
}
render() {
return (
<ImageTool
src="https://c4.staticflickr.com/8/7514/16189387096_420dbca030_h.jpg"
value={this.state.value}
onChange={handleImageToolchange}
/>
)
}
}Usage
CSS style calculator
import calculateStyles from '@lyra/imagetool/calculateStyles'
const styles = calculateStyles({
hotspot: {
x: 0.4,
y: 0.3,
height: 0.6,
width: 0.4
},
crop: {
left: 0.1,
right: 0.2,
top: 0.1,
bottom: 0.21
},
image: {height: 100, width: 125},
container: {aspectRatio: 16 / 10},
align: {
x: 'left',
y: 'center'
}
})returns an object with style objects that can be used with markup
{
"container": {
"overflow": "hidden",
"position": "relative",
"width": "100%",
"height": "62.5%"
},
"crop": {
"position": "absolute",
"overflow": "hidden",
"height": "100%",
"width": "79.26%",
"top": "7.97%",
"left": "17.51%"
},
"image": {
"position": "absolute",
"height": "144.93%",
"width": "142.86%",
"top": "-14.49%",
"left": "-14.29%"
},
"padding": {
"marginTop": "62.5%"
}
}this can then be passed to jsx markup with the following structure:
<div style={styles.container}>
<div style={styles.padding} />
<div style={styles.crop}>
<img
src="https://c4.staticflickr.com/8/7514/16189387096_420dbca030_h.jpg"
style={styles.image}
/>
</div>
</div>