JSFiddle - React, Tailwind, and code Playground

by fwait

HTML

<div id="main">test1</div>

React

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import { Modal,ModalManager,Effect} from 'react-dynamic-modal-v2';

class MyModal extends Component{
   render(){
      const { text,onRequestClose } = this.props;
      return (
         <Modal
            onRequestClose={onRequestClose}
            effect={Effect.Newspaper}>
            <h1>What you input : {text}</h1>
            <button onClick={ModalManager.close}>Close Modal</button>
         </Modal>
      );
   }
}

class App extends Component{
    openModal(){
       const text = this.refs.input.value;
       ModalManager.open(<MyModal text={text} onRequestClose={() => true}/>);
    }
    render(){
       return (
          <div>
            <div><input type="text" placeholder="input something" ref="input" /></div>
            <div><button type="button" onClick={this.openModal.bind(this)}>Open Modal </button> </div>
          </div>
       );
    }
}

ReactDOM.render(<App />,document.getElementById('main'));