Package Exports

react-popups

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-popups) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 git@github.com: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