🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Reactjs component for spawning custom popups at mouse position.

Modal_Popup React

Documentation

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 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


You May Also Like