0.1.0 • Published 10 years ago

react-modallink v0.1.0

Weekly downloads
13
License
MIT
Repository
github
Last release
10 years ago

react-modallink

Join the chat at https://gitter.im/andersem/react-modallink Creates a modal and a link to open the modal

Installation

npm install react-modallink --save

Usage

Create a react-component that contains a Modal

# MyModal.jsx
var Modal = require('react-modallink').Modal;

var MyModal = React.createClass({
  render: function () {
    return (
      <Modal {...this.props}>
        <header>Modal</header>
        <p>{this.props.something}</p>
      </Modal>
    );
  }
});

Include a link for it in another component

var MyModal = require('./MyModal.jsx');
var ModalLink = require('react-modallink').ModalLink;

var ComponentWithModalLink = React.createClass({
  render: function () {
    return (
      <div>
        <ModalLink modal={<MyModal something="anything" />}>
          <a>Open modal</a>
        </ModalLink>
      </div>
    );
  }
});

Add some css into the mix

.overlay {
  box-sizing: content-box;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: auto;
  color: #272b34;
  font-size: 1rem;
  z-index: 9999;
}

.overlay.hidden {
  display: none;
}

.overlay-top {
  box-sizing: content-box;
  position: relative;
  width: 699px;
  margin: 4% auto;
}

.overlay-content {
  box-sizing: content-box;
  position: relative;
  width: 699px;
  margin: 0 auto;
  margin-bottom: 4%;
  padding: 22.5px 30px;
  background-color: #F3F4F7;
  border-radius: 4px;
}

.overlay-close {
  box-sizing: content-box;
  position: absolute;
  top: 25.5px;
  right: 26px;
  cursor: pointer;
  z-index: 2000;
  padding: 0;
  color: #CED3E1;
  font-size: 4em;
  font-weight: 300;
  line-height: 1em;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

Inspiration

Inspired by and modified from react-bootstrap and cupcake-react-modal.

0.1.0

10 years ago

0.0.11-5

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago

0.0.0

10 years ago