rc-modal v0.0.2

react-modal

a base modal and modal manager from react components

The project will no longer be maintained, please use react-isolated instead.

Install

npm install --save rc-modal

Usage about Modal

import Modal from 'rc-modal'

const props = {
  title: 'hello world', // if set, will show title
  showClose: true, // if true will show close btn
  width: 100, // content width
  show: true, // default show
  className:'mine-modal', // class name
}

ReactDOM.render(<Modal {...props}/>, container)

Usage about ModalListManager

import Modal, * as modal from 'rc-modal'

const ID = '__MODAL_LIST_CONTAINER__'

// this will create element div#__MODAL_LIST_CONTAINER__ in body
// if it not exists, and render component `ModalList` under it
// by call `ReactDOM.render`
const manager = new modal.ModalListManager(ID)

// add a component to list:
// this will return a object include instance info
// include key, instance, etc. please {@see ./src/index.ts}
const item = manager.add(Modal, {title: 'Hello World', show: true})

// the item's field `instance` is the component's instance
// `Modal` instance has two method: `show()` and `hide()`
// hide the modal
item.instance.hide()

// show it
item.instance.show()

// delete the instance from modal list
manager.del(item.key)

**The module export a default manager under element __modal_container__, you can call it directly`:

import Modal, {manager} from 'rc-modal'

manager.add(Modal, {show: false})

Use in project

custom modal component

You can create a custom component module extends Modal as follow:

// mine-modal.ts
import Modal, * as modal from 'rc-modal'

export interface MineModalProps extends modal.ModalProps {
  hint?: string
}
export interface MineModalState extends modal.ModalState {
  count?: number
}
export class MineModal extends Modal {
  static defaultProps: MineModalProps = {
    hint: 'Hahahahahaha...',
  }
  state: MineModalState = {
    count: 1
  }
  render() {
    return (
      <Modal show={false} ref="modal">
        <div className="count">
          <span key="hint">{this.props.hint}</span>
          <span key="count">{this.state.count}</span>
        </div>
        <div className="button" onClick={() => this.setState({count: this.state.count + 1})}>Add</div>
      </Modal>
    )
  }
}

// Add a default component to modal list
export const mineModal = modal.manager.add(MineModal)

Then Call to show the modal in any other components:

// page.ts
import MineModal, {modal} from './mine-modal'

export default class Page extends React.Component<void, void> {
  render() {
    return (
      <div className="page">
        <button onClick={() => modal.instance.show()}>Show</button>
      </div>
    )
  }
}