概要
みなさんこんにちは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を利用していきましょう。