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

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

関連記事

railsのcarrierwaveとremotipartで画像のアップロードを非同期にしjsonを受け取る

概要 みなさんこんにちはcandleです。今回はremotipartとcarrierwaveを使って画像のアップロードをajax化したいと思います。 railsのフォームはremote設定をするだけで …

fabricを使ってgit のdiffで指定のバージョンからのファイルをアップロード

概要 皆さんこんにちはcandleです。今回はfabricを使ってgit のpush pullを使わないデプロイを実装します。 一般にgit管理されているプロジェクトのデプロイは下の様な図式でデプロイ …

【TwitterBootstrap2.3.2】cssによるレスポンシブwebデザインのメディアサイズの範囲分け

概要 みなさんこんにちはcandleです。今回は当たり前の内容ですが、twitterbootstrap2.3.2(以下bootstrap)のmediaサイズがどの様に分けられているのか見てみましょう。 …

railsのroutesでhttpのGETやPOSTを指定してルーティングを表示する

概要 みんさんこんにちはcandleです。今回は少し頭をひねれば分かる事ですが、少し迷ったので、記事にまとめました。 railsですごいwebアプリケーションを作っていると、ルーティングが複雑きわまり …

gitpythonでfirst commitする

概要 みなさんこんにちはcandleです。今回はgitpythonで、初めてのコミットをする方法を紹介します。 gitpythonでコミットは難しくないのですが、初めてのコミットは要領が違ったので、ま …


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