nitin42 / react-imgpro

📷 Image Processing Component for React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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;

related #10

@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

After #13 you can easy get the code change in PR

now you can check it #10

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