お題
react-toastifyを使ってリッチなトーストを実装する
何かの処理の後にちょっとしたお知らせを通知したい時はトーストの出番です。
モバイルアプリフレームワークのコルドバにも、Toast-PhoneGap-Pluginというプラグインが用意
されていますが、これをこのまま使うとネイティブでデフォルトで実装されている灰色のトーストが表示されます。
ハイブリッドアプリのトーストに関してはこれで完結されますが、cordovaにreactを導入している場合は
react-toastifyというライブラリを使った方が彩のあるアプリに仕上げられます。
導入方法
</pre>
<div></div>
<div>
<div>①npm i --save react-toastifyでインストール</div>
<div>②以下のように実装。</div>
<div>import React, { Component } from 'react';</div>
<div>import { withRouter } from 'react-router';</div>
<div>import { Page, Button} from 'react-onsenui';</div>
<div>import 'onsenui/css/onsenui.css';</div>
<div>import 'onsenui/css/onsen-css-components.css';</div>
<div>import LoginHeader from '../components/LoginHeader';</div>
<div>import { ToastContainer, toast, Slide, } from 'react-toastify';</div>
<div>import 'react-toastify/dist/ReactToastify.css';</div>
<div>class SamplePage extends Component {</div>
<div></div>
<div> constructor(props) {</div>
<div> super(props);</div>
<div> this.state = {</div>
<div> }</div>
<div> this.submit = this.submit.bind(this);</div>
<div> }</div>
<div> async submit() {</div>
<div> toast.info("トーストが発行されました！");</div>
<div> }</div>
<div> render() {</div>
<div> return (</div>
<div> <Page></div>
<div> <LoginHeader title="ログイン" /></div>
<div> <div id="login-page"></div>
<div> <ToastContainer</div>
<div> position="bottom-center"</div>
<div> autoClose={1000}</div>
<div> hideProgressBar={true}</div>
<div> transition={Slide}/></div>
<div> <Button className="remind-btn" onClick={this.submit} modifier="large">送信</Button></div>
<div> </div></div>
<div> </Page></div>
<div> );</div>
<div> }</div>
<div>}</div>
<div>export default withRouter(SamplePage);</div>
<div></div>
</div>
<pre>
submit関数の中でトーストを出す関数「toast」を実行しています。
toasr.〇〇の関数にはそれぞれ意味を持つ色が用意されており、ここでのtoast.infoの場合は青色
toast.successの場合は緑色、toast.errorの場合は赤色のトーストが出るようになっています。
オプションも多数用意されており、それぞれ以下のような意味合いになります。
position=”bottom-center“：トーストが出現する位置
autoClose={1000}：1秒後にトーストを閉じる
hideProgressBar={true}：トースト下部に現れるプログレスバーを表示しない
transition={Slide}：スライドアニメーションでトーストを表示
デモサイトで様々なトーストに変更できるので、アプリまたは自分が良いと思ったデザインで
実装してみてください。
