latest
latest

Reactで使用する方法

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のReactパッケージをインストールします。

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

    import { GcMask } from '@mescius/inputman.react';
    import '@mescius/inputman/CSS/gc.inputman-js.css';
    
  • データを設定して、InputManJSのマスクコンポーネントを追加します。

    function App() {
      const [maskValue, setValue] = useState('1234567');
      return (
        <div className="App">
          <GcMask value={maskValue} formatPattern={'〒\\D{3}-\\D{4}'}></GcMask>
        </div>
      );
    }
    
  • アプリケーションを実行します。

    npm start