react-dialog-yzy

react dialog component

Usage no npm install needed!

<script type="module">
  import reactDialogYzy from 'https://cdn.skypack.dev/react-dialog-yzy';
</script>

README

Install

npm i react-dialog-yzy

or

yarn react-dialog-yzy

Usage

  import Dialog from 'react-dialog';

  yesFn = () => {
    this.setState({
      isShow: false
    })
  }
  noFn = () => {
    this.setState({
      isShow: false
    })
  }
  openDialog = () => {
    this.setState({
      isShow: true
    })
  }

  render() {
    const { isShow, title, text, YesTitle, NoTitle} = this.state
    return (
      <div className="App">
        <button style={{
          width: '120px', 
          height: '60px', 
          background: 'yellowgreen', 
          color: '#fff', 
          fontSize: '20px', 
          borderRadius: '8px', 
          marginTop: '100px',
          outline: 'none',
          border: '1px solid transparent',
          cursor: 'pointer'
        }} 
        onClick={this.openDialog}>click</button>
        <Dialog 
        className='dialogStyle'
        isShow={isShow}
        title={title}
        text={text}
        YesTitle={YesTitle}
        NoTitle={NoTitle}
        yesBtn={this.yesFn}
        noBtn={this.noFn}
        />
      </div>
    );
  }

Props

name type default description
className String null need add '!important'
isShow Boolean false control dialog display
title String '这是一个标题' Title Name
text String '这是弹窗内容' Text Name
noBtn Function null control dialog noBtn function (if not have prop noBtn will no 'noBtn' button)
yesBtn Function null control dialog yesBtn function (if not have prop yesBtn will no 'yesBtn' button)
YesTitle String Yes yesBtn name
NoTitle String No noBtn name