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

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

関連記事

grepコマンドを使って正規表現を色々試してみるその2

概要 みなさんこんにちはcandleです。今回は前回に引き続き、正規表現を勉強していきましょう。 前提 unixを使用するので、多少、unixコマンドになれていること サンプル文章 今回は下の文章を用 …

Hiragino Sansフォントウェイトのcss書き方まとめ

概要 みなさんこんにちはcandleです。今回はHiragino Sansのcssの書き方を紹介します。 Hiragino Sansの特徴はフォントの太さを1から9段階まで変えられることです。 一方で …

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

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

wordpressで任意のサブカテゴリー全てをget_categoriesで取得する

概要 みなさんこんにちはcandleです。今回はwordpress開発でよくあるサブカテゴリーを全て取得する方法を紹介します。 カテゴリー一覧をサイドバーに表示したい時があります。この時、get_ca …

React WebでURLをaタグのリンクにして表示する

概要 みなさんこんにちはcandleです。今回はReactでコメントなどに投稿されたURLからリンクを生成する方法を紹介します。しかし、URLからリンクの自動生成は結構危険です。無尽蔵にリンク化を許可 …


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