react-popup-layer
a popup layer component for react
Last updated 3 years ago by jinke.li .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-popup-layer 
SYNC missed versions from official npm registry.

react-popup-layer

a popup layer component for react

Example

https://lijinke666.github.io/react-popup-layer/

Development

git clone https://github.com/lijinke666/react-popup-layer
npm install
npm start

Install

npm install react-popup-layer --save

Usage

import React from "react"
import ReactDOM from "react-dom"
import ReactPopupLayer from "react-popup-layer"
import "react-popup-layer/assets/index.css"

const margin = {margin:"10px 0"}

class Demo extends React.PureComponent {
    state = {
        visible: false,Message
        visible2: false,
        visible3:false,
    }
    onOk = ()=>{
        console.log('ok!')
        this.cancelModal()
    }
    openModal = () => {
        this.setState({ visible: true })
    }
    cancelModal = () => {
        this.setState({ visible: false })
    }
    openNoFooterModal = ()=>{
         this.setState({ visible2: true })
    }
    cancelNoFooterModal = ()=>{
        this.setState({ visible2: false })
    }
    openCustomFooterModal = ()=>{
         this.setState({ visible3: true })
    }
    cancelCustomFooterModal = ()=>{
        this.setState({ visible3: false })
    }
    customOk = ()=>{
        console.log('ok!')
        this.cancelCustomFooterModal()
    }
    render() {
        const { visible,visible2,visible3 } = this.state
        return (
            <div>
                <h2>Example</h2>
                <hr/>

                <ol>
                    <li style={margin}><button onClick={this.openModal}>open Modal</button></li>
                    <li style={margin}><button onClick={this.openNoFooterModal}>open no footer Modal</button></li>
                    <li style={margin}><button onClick={this.openCustomFooterModal}>open custom footer Modal</button></li>
                </ol>
         
                <hr />
                <ReactPopupLayer
                    title="example title"
                    okText="ok"
                    cancelText="cancel"
                    visible={visible}
                    onOk={this.onOk}
                    onCancel={this.cancelModal}
                    className="my-modal"
                >
                    <p>
                        <h1>bla bla bla ...</h1>
                    </p>
                </ReactPopupLayer>

                <ReactPopupLayer
                    title="wtf!! I have no footer"
                    visible={visible2}
                    footer={false}
                    onCancel={this.cancelNoFooterModal}
                    className="my-modal"
                >
                    <p>
                        <h1>bla bla bla ...</h1>
                        <button onClick={this.cancelNoFooterModal}>:(</button>
                    </p>
                </ReactPopupLayer>

                <ReactPopupLayer
                    title="Custom Footer"
                    visible={visible3}
                    onCancel={this.cancelCustomFooterModal}
                    footer={[
                        <button key="cancel" onClick={this.cancelCustomFooterModal}>cancel</button>,
                        <button key="ok" onClick={this.customOk}>ok</button>
                    ]}
                    className="my-modal"
                >
                    <p>
                        <h1>bla bla bla ...</h1>
                    </p>
                </ReactPopupLayer>
            </div>
        )
    }
}

ReactDOM.render(
    <Demo />,
    document.getElementById('root')
)

Current Tags

  • 0.2.3                                ...           latest (3 years ago)

11 Versions

  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago

Copyright 2014 - 2016 © taobao.org |