react-flop

A simple flop component for React

Installation

$ npm install react-flop --save
$ yarn add react-flop

Usage

class App extends React.Component {
  constructor(props) {
    super(props);
    const that = this;

    that.state = {
      haveGift: false,
      isFlop: false
    };
  }

  render() {
    const that = this;
    const { haveGift, isFlop } = that.state;
    const slot = () => {
      if (!isFlop) {
        return null;
      }

      if (haveGift) {
        return <div>获奖了</div>;
      } else {
        return <div>GG</div>;
      }
    };

    const onClick = () => {
      that.setState({
        isFlop: true,
        haveGift: true
      });
    };

    return (
      <Flop
        imgFLop={require("./images/WechatIMG3.png")}
        imgFLoped={require("./images/WechatIMG2.png")}
        slot={slot()}
        onClick={onClick}
        haveGift={haveGift}
        isFlop={isFlop}
        imgFLopWidth={686}
        imgFLopHeight={272}
      />
    );
  }
}

export default App;

Properties

  static propTypes = {
    imgFLop: PropTypes.string.isRequired,      //Preflip picture
    imgFLoped: PropTypes.string.isRequired,    //Flipped picture
    cardName: PropTypes.string,                //Custom Components classname
    slot: PropTypes.node,                      //Reserved Node Slot
    onClick: PropTypes.func.isRequired,        //onclick
    haveGift: PropTypes.bool,                  //awarded or not
    isFlop: PropTypes.bool,                    //Flop or not
    imgFLopWidth: PropTypes.number.isRequired, //Picture width
    imgFLopHeight: PropTypes.number.isRequired,//Picture height


  };

  static defaultProps = {
    cardName: '',
    slot: null,
    isFlop: false,
    haveGift: false,
  };

License

MIT