react-modalを使ってモーダルを表示する
reactを使ってモーダルを作ることができるらしい。見た感じそこまで難しそうじゃない。
react-modalを使ってみる
例を見てみるとどうなっているかというと、<Modal></Modal>
で囲った部分がモーダルとして出力されることが分かる。
import React from 'react'; import ReactDOM from 'react-dom'; import Modal from 'react-modal'; const customStyles = { content : { top : '50%', left : '50%', right : 'auto', bottom : 'auto', marginRight : '-50%', transform : 'translate(-50%, -50%)' } }; // Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/) Modal.setAppElement('#yourAppElement') class App extends React.Component { constructor() { super(); this.state = { modalIsOpen: false }; this.openModal = this.openModal.bind(this); this.afterOpenModal = this.afterOpenModal.bind(this); this.closeModal = this.closeModal.bind(this); } openModal() { this.setState({modalIsOpen: true}); } afterOpenModal() { // references are now sync'd and can be accessed. this.subtitle.style.color = '#f00'; } closeModal() { this.setState({modalIsOpen: false}); } render() { return ( <div> <button onClick={this.openModal}>Open Modal</button> <Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} style={customStyles} contentLabel="Example Modal" > <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2> <button onClick={this.closeModal}>close</button> <div>I am a modal</div> <form> <input /> <button>tab navigation</button> <button>stays</button> <button>inside</button> <button>the modal</button> </form> </Modal> </div> ); } } ReactDOM.render(<App />, appElement);
この例で言えば以下がモーダルとして表示される。
ボタンをクリックすると、openModal関数が動き、isOpenの値がtrueになる→モーダルが表示される
closeボタンをクリックすると、closeModal関数が動き、isOpenの値がfalseになる→モーダルが閉じる
英語ですがドキュメントありますね。