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 [email protected]:Radivarig/react-popups.git npm install npm run build npm run startFeatures
- 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
