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

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

関連記事

MAMPにCakePHPを導入して動かす

概要 みなさんこんにちはcandleです。今回はMAMPでCakePHPを動かす環境設定を行いましょう。 条件 MAMPがインストールされている CakePHPをダウンロードする 下のCakePHPの …

ruby on railsに最強のwysiwygエディタ、Squireを導入する

概要 みなさんこんにちはcandleです。今回はruby on railsにsquire editorを導入したいと思います。 squireはオープンソースの便利なwysiwygエディタです。 カスタ …

ReactでFaker.jsを利用してダミーデータを生成する

概要 みなさんこんにちはcandleです。今回はFaker.jsをReactで使ってみようと思います。 Faker.jsの使用目的は様々あると思います。多くの場合はテストで使うと思うのですが、今回は簡 …

railsのfluent-logger gemを使ってユーザーのアクセスをfluentdサーバに収集する

概要 みなさんこんにちはcandleです。前回からfluentd関連の記事を続けていますが、今回辺りから実用的な使い方を書いていきたいと思います。 fluentdと言えば、ビックデータで扱うようなデー …

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

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


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