Plugin does not work with shadcn Input component

オープン
#2 コメント 0 件 リアクション 5 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
react, typescript
領域
frontend

調査の方向性

このレポートでは、shadcn/ui Input と useInputMask を使用した Vite の再現例が提供されています。まずその例を再現し、パッケージに記載されている hook の使用方法を読みます。マスキングの動作を検証してから、named import と動作する shadcn Input の例をドキュメントに追加します。

索引モデルが issue の本文から書いたものです。

説明

Description:

Steps to Reproduce:

  • Install ui.shadcn.com with Vite. Add this code:
const { getInputProps } = useInputMask({
    mask: 'One does not simply walk into AAAAAA',
  });

  return (
    <div>
      <h1>Overview</h1>
      <div className="w-[240px] mt-12">
        <Label>Label</Label>
        <Input name="number" {...getInputProps} onChange={e => {
          // Your onChange handler gets the output of the hook (won't trigger if the input is invalid)
          console.log(e.target.value);
        }} />
      </div>

    </div>
  );

Expected Behavior:

  • Input should be masked

Actual Behavior:

  • Input is not masked

Error message: No error message.

Note: Update documentation. Import only functions if :

import { useInputMask } from '@code-forge/react-input-mask';

主要言語
TypeScript
スター
35
フォーク
0
PR マージ指標
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

code-forge-io/react-input-mask のほかの issue

code-forge-io/react-input-mask の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。