modals

A cool modal manager for react

Jan 03, 2020
A cool modal manager for react

react-modal-manager

A cool modal manager for react.

View Demo View Github

installation

npm install -S @feizheng/react-modal-manager

update

npm update @feizheng/react-modal-manager

properties

propertytypedefaultdescription
classNameString-The extened className
valueFunction-The require.context
injectFunction-The injector for app

usage

  1. import css
@import "[email protected]/react-modal-manager/dist/style.scss"; // customize your styles: $react-modal-manager-options: ()
  1. import js
import ReactModalManager, { connect } from '../src/main'; import ReactDOM from 'react-dom'; import React from 'react'; import './assets/style.scss'; const Button = connect((props) => { return ( <React.Fragment> <button className="button" onClick={() => { props.$modal.present('modal1'); }}> Open modal </button> <button className="button" onClick={() => { props.$modal.present('modal2'); }}> Open Modal2 </button> </React.Fragment> ); }); class App extends React.Component { render() { const ctx = require.context('./modals/', true, /\.js$/); return ( <div className="app-container"> <ReactModalManager context={ctx}> <h2 style={{ marginBottom: 20 }}>My Modals App</h2> <center> <img src="http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg" /> </center> <Button /> </ReactModalManager> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));

GitHub

Recommended