react-popups

Try it - Live Example

Install

npm install --save react-popups

Demo

Check out Live Example and the example code, or run locally

git clone [e-mail]:Radivarig/react-popups.git
npm install
npm run build
npm run start

Features

• create custom popup components on custom event
• pass data to them
• detect screen quadrant (safe to click near edges)
• close all front popups on click

Basic Usage

// ...
var Popups = require('react-popups')
 
var PopupHandler = React.createClass({
  render: function() {
    console.log('received: ', this.props.data) // received: clicked element identifier
    var Popup = <DefaultPopup/>
    switch(this.props.data) {
      case 'clicked element identifier': Popup = <SomePopup/>; break
      // ...
      // var something = this.props.popupProps.something
    }
  }
  return ({Popup})
})
 
var App = React.createClass({
  render: function() {
    var linkIfNoMatch = '/your-url' // for no action use 'javaScript:void(0)'
    return (
      <div>
        <Popups handler={PopupHandler}
                clickButtons={[0]}        // if defined adds 'click' event; 0 left, 1 middle, 2 right
                dataName='data-yourdata'  // defaults to 'data'
                />
                //event='someOtherEvent'
                //popupProps={something: ..}  // will be passed to PopupHandler
 
        Some <a data-yourdata={'clicked element identifier'} href={linkIfNoMatch}>demo</a> text.
      </div>
    )
  }
})
 
require('react-dom').render(<App/>, document.body)

License

MIT