Create React App（Reactのコマンドラインツール）を用いてReactアプリケーションを作成する場合は、次の手順でInputManJSのコンポーネントを使用することができます。

まだCreate React Appがインストールされていない場合は、次のコマンドを実行して、Create React Appパッケージをグローバルにインストールします。

npm install -g create-react-app

Reactアプリケーションを作成します。

create-react-app inputmanjs-react

アプリケーションプロジェクトのフォルダに移動します。

cd inputmanjs-react

InputManJS製品に含まれる下記のフォルダとファイルを、プロジェクトの同じ階層にコピーします。

samples¥react¥src¥inputmanjs¥

samples¥react¥public¥gc.inputman-js.ja.1.0.js

public¥index.htmlファイルで、gc.inputman-js.ja.1.0.jsを読み込みます。

<script src="gc.inputman-js.ja.1.0.js"></script>

src/App.jsファイルの先頭で、InputManJSのコンポーネントとCSSファイルをインポートします。

import { GcMask, GcCalendar, GcDatetime, GcTextBox, GcNumber } from './inputmanjs/GcInputMan.component';
import './inputmanjs/gc.inputman-js.1.0.css';

src/App.jsファイルのAppクラスで、値を保持するための変数をStateに追加します。また、値が変更されたときに実行されるイベントハンドラを追加して、変更された値をStateに設定します。

class App extends Component {
　constructor(props) {
　　super(props);
　　this.state = {
　　　maskValue: '1234567',
　　};
　　this.onMaskValueChanged = this.onMaskValueChanged.bind(this);
　}
　onMaskValueChanged(value) {
　　this.setState({maskValue: value});
　}
}

src/App.jsファイルのApp.render()メソッドで、InputManJSのマスクコンポーネントを描画します。

render() {
　return (
<div>
　<GcMask value={this.state.maskValue} formatPattern={'〒¥¥D{3}-¥¥D{4}'} onValueChanged={this.onMaskValueChanged}/><br/>
　値: {this.state.maskValue}
</div>
　);
}

アプリケーションを実行します。

npm start