nitin42 / react-imgpro

📷 Image Processing Component for React
2.18k stars 83 forks source link

How can i update props on button click #11

Closed mrjosshi closed 6 years ago

mrjosshi commented 6 years ago

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(

that.editType('greyscale')} style={{backgroundColor:'#000'}} className={`${styles.item} ${styles.item1}`}> greyscale
that.editType('greyscale')} style={{backgroundColor:'#a52a2a'}} className={`${styles.item} ${styles.item2}`}> 2
          <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 commented 6 years ago

related #10

mrjosshi commented 6 years ago

@Sunshine168 how can i use this in my app How to update npm and updated docs how to use these features

Sunshine168 commented 6 years ago

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

mrjosshi commented 6 years ago

@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

Sunshine168 commented 6 years ago

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

Sunshine168 commented 6 years ago
mrjosshi commented 6 years ago

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

mrjosshi commented 6 years ago

any hope?

Sunshine168 commented 6 years ago

~ 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

mrjosshi commented 6 years ago

Thanks Please let me know when you have done this

mrjosshi commented 6 years ago

is there any hope?

nitin42 commented 6 years ago

@Sunshine168 added you as an owner on this project. Thank you so much for your contributions! Really appreciate that.

Sunshine168 commented 6 years ago

Ye! i will publish a new version tomorrow

Sunshine168 commented 6 years ago

Release 1.3.7 !

mrjosshi commented 6 years ago

Thanks its working you can close it