joppot

コピペで絶対動く。説明を妥協しない

プログラミング

React webでreact-simple-formatを使う

投稿日:2018年12月7日 更新日:


概要

みなさんこんにちはcandleです。今回はreactでsimple-formatを使ってみたいと思います。simple-formatは割とRuby on Railsでは有名で、よく使われます。Reactではレガシーの react-simple-formatと16gさんが作ったものがあります。古い方は使いづらかったので16gさんが作成したこちらを利用したいと思います。

https://github.com/16g/react-simple-format

前提

なし

プロジェクトの作成

もしも、すでにReactのプロジェクトがある方はそちらを利用してください。
ない場合は以下のコマンドで作成します。

create-react-app simple_format_sample
cd simple_format_sample

react-simple-formatの使い方

最初にインストールします。

yarn add @16g/react-simple-format

適当なコンポーネントを開きます。私はsrc/App.jsに記述します。

import React, { Component } from 'react'
import SimpleFormat from '@16g/react-simple-format'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      content: '',
    }
    this.handleFormInputChanged = this.handleFormInputChanged.bind(this)
  }

  handleFormInputChanged(event) {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }

  render() {
    return (
      <div style={{ textAlign: 'center' }}>
        <div>Simple Format サンプル</div>
        <textarea
          name="content"
          value={this.state.content}
          onChange={this.handleFormInputChanged}
          style={{
            width: '400px',
            height: '300px',
          }}
        />
        <div style={{ marginTop: '100px' }}>
          <SimpleFormat text={this.state.content} />
        </div>
      </div>
    )
  }
}

export default App

simaple formatの記述はこの2箇所です。ここでインポートしています。

import SimpleFormat from '@16g/react-simple-format'

ここでtextareaで入力した値をsimple formatを介して表示しています。

  <SimpleFormat text={this.state.content} />

簡単ですね。

まとめ

simple formatを利用していきましょう。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

react-lazyloadを使って画像を遅延ロードをする

概要 みなさんこんにちはcandleです。今回はreact-lazyloadを使って画像の遅延読み込みをしてみましょう。SPAにおける問題は最初の読み込み時の遅さです。その中でも画像が多いサイトになる …

ruby on railsのckeditorでcarrierwaveを使って画像をアップロードする

概要 みなさんこんにちはcandleです。今回はckeditorの画像のアップロードを行ってみたいと思います。 ckeditorの画像のアップロードは公式githubにも記載されているのですが、まあや …

MAMPのSQLiteManagerを使用してsqlite3のテーブルの作成とフィールドの設定、レーコードの挿入を試す

概要 みなさんこんにちはcandleです。前回と引き続き、SQLiteManagerを使用してsqlite3を試してみましょう。 はじめに、書いておきますが、MAMPのSQLiteManagerはSQ …

Railsの正規表現を使用して文字列から任意の文字を取得する

概要 みなさんこんにちはcandleです。今回はrailsの正規表現を使って任意の文字を文字列から取得する方法を紹介します。 rails4になってからなのか、railsはrubyであるにもかかわらず、 …

Rails pluginでengineを使ったgemの作り方[6](config編)

概要 みなさんこんにちはcandleです。今回は前回に引き続き、gemの作成をやっていきます。 gemのconfigとは恐らく一般的に以下の様な状況の時に使う事になると思います。 例えば、gemのプロ …


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー