npm

Join us for the "JavaScript Supply Chain Security" tech talk, presented by VP of Security, Adam Baldwin. 6/20 at 10am PT.Sign up here »

react-dialog-yzy

1.0.3 • Public • Published

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

install

npm i react-dialog-yzy

Downloadsweekly downloads

3

version

1.0.3

license

ISC

last publish

collaborators

  • avatar
Report a vulnerability