浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react】react-toastifyを使用して立体感のあるトーストを実装する

お題
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}:スライドアニメーションでトーストを表示
デモサイトで様々なトーストに変更できるので、アプリまたは自分が良いと思ったデザインで
実装してみてください。
  • この記事いいね! (0)