React webでreact-simple-formatを使う

Tweet

概要

みなさんこんにちは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の記述はこの２箇所です。ここでインポートしています。

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

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

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

簡単ですね。

まとめ

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