1.0.2 • Published 5 years ago

react-bb-poppop v1.0.2

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

react-bb-poppop

This is a modulable component to render poppop with some nice features !

NPM JavaScript Style Guide

Install

npm install --save react-bb-poppop

Usage

import React, { Component } from 'react'
import BbPopop from 'react-bb-poppop'

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showPopop: false,
      showNotice: false
    };

  }

  togglePopop() {
    this.setState({
      showPopop: !this.state.showPopop
    });
  }

  noticePopop() {
    this.setState({
      showNotice: !this.state.showNotice
    });
  }

  render () {
    return (
      <div>
        <button onClick={this.togglePopop.bind(this)}>Message Box</button>
        {this.state.showPopop ? 
          <div>
            <BbPopop 
              styles="message"
              kind="Alert"
              closePopop={this.togglePopop.bind(this)}
            >
              Testing
            </BbPopop>
          </div>
          : null
        }
        <br/>
        <br/>
        <br/>
        <button onClick={this.noticePopop.bind(this)}>Notice Box</button>
        {this.state.showNotice ? 
          <div>
            <BbPopop 
              styles="notice"
              kind="Alert"
              closePopop={this.noticePopop.bind(this)}
            >
              Testing
            </BbPopop>
          </div>
          : null
        }
      </div>
    )
  }
}

License

MIT © BananaBb