How can i update props on button click
mrjosshi opened this issue · comments
Here is my code and i want to change greyscale to true on button click using function that.editType('greyscale')
import React, { Component } from 'react';
import ProcessImage from 'react-imgpro';
import styles from '../style.scss';
const style = {
container:{
display:'flex',
alignItems:'center',
height:'100%'
},
itemContainer:{
left:0
},
bgImgaesContainer:{
width:'100%',
left:0
}
}
class PostEditImage extends Component{
state = {
src: '',
err: null,
greyscale:false
}
editType=(type)=>{
switch(type){
case 'greyscale':
this.setState({greyscale:true})
break;
}
}
render(){
var w = window.innerWidth;
var that =this;
return(
<ProcessImage
image={'http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'}
resize={{ width: w}}
greyscale={that.state.greyscale}
/>
<div style={style.bgImgaesContainer} className={`${styles.bgImgaesContainer} ${styles.width90}`}>
<div style={style.itemContainer} className={styles.itemContainer}>
<div onClick={(e)=>that.editType('greyscale')} style={{backgroundColor:'#000'}} className={`${styles.item} ${styles.item1}`}>
greyscale
</div>
<div onClick={(e)=>that.editType('greyscale')} style={{backgroundColor:'#a52a2a'}} className={`${styles.item} ${styles.item2}`}>
2
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#d2691e'}} className={`${styles.item} ${styles.item3}`}>
3
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#0000ff'}} className={`${styles.item} ${styles.item4}`}>
4
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#e9967a'}} className={`${styles.item} ${styles.item5}`}>
5
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#556b2f'}} className={`${styles.item} ${styles.item5}`}>
6
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#cd5c5c'}} className={`${styles.item} ${styles.item5}`}>
7
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#800000'}} className={`${styles.item} ${styles.item5}`}>
8
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#f96332'}} className={`${styles.item} ${styles.item5}`}>
9
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#c0c0c0'}} className={`${styles.item} ${styles.item5}`}>
7
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#4682b4'}} className={`${styles.item} ${styles.item5}`}>
8
</div>
<div onClick={(e)=>that.editType()} style={{backgroundColor:'#006400'}} className={`${styles.item} ${styles.item5}`}>
9
</div>
</div>
</div>
</div>
)
}
};
export default PostEditImage;
@Sunshine168 how can i use this in my app How to update npm and updated docs how to use these features
emm be patience @anilljoshi Waiting @nitin42 review and publish a new version with this feat . or you can fork my rep and build by your self
@Sunshine168 Thanks could you let me know where i need to change in component so i can meet with my requirement could you please share any working example or code
is it updated on NPM because its still showing last publish 6 months ago and Please update docs as well how can we use new feature thanks
any hope?
~ i try to contact the owner to add me as an owner for this package , then i can publish the new version to NPM . Not reply yet
Thanks Please let me know when you have done this
is there any hope?
@Sunshine168 added you as an owner on this project. Thank you so much for your contributions! Really appreciate that.
Ye! i will publish a new version tomorrow
Release 1.3.7 !
Thanks its working you can close it