サンプルコード– tag –

この記事ではブラウザに保存されている情報をフォームに自動補完をする方法をご紹介します。 フォームの自動補完をするとユーザーが情報をスムーズに入力するとができ、申込みや問い合わせなどのコンバージョンを増やす事ができます。 【自動補完をさせる...

この記事では数字のみを入力できるinput作る方法をサンプルコード付きでご紹介します。javascriptは使用しません。 数字のみ入力できる入力項目の作り方は type属性を使って数字のみ入力pattern属性を使って数字のみ入力 です。 これらの方法のサンプルコ...

この記事ではSWRのuseSWRInfinite()を使って無限スクロールの実装方法をサンプルコードを使ってご紹介します。 サンプルコードのデモは次の通りです。 このデモの仕様は データは2件づつ取得一番下の「読み込み中」が表示されたのをトリガーとして次のデー...

この記事ではSWRのuseSWRInfinite()を使って「もっと見る」機能の実装方法をサンプルコードを使ってご紹介します。 サンプルコードのデモは次の通りです。 このデモの仕様は 1ページ目から取得1ページあたり2枚の写真ボタンをクリックすると次のページの写...

この記事ではテキスト内にあるツイッターのURLやyoutubeのURLをもとにプレビューを表示する方法をサンプルコード付きでご紹介します。 サンプルコードのデモは次の通りです。 デモではテキストエリアに入力されたツイッターのURLやyoutubeのURLを1つづつ表...

この記事ではコメントなどのテキスト内の任意の文字列をリンクに変換する方法をサンプルコード付きでご紹介します。テキスト内の任意の文字列とは具体的に URLハッシュタグ（#hogehoge）メンション（@hogehoge） です。これらの文字列をテキストリンクする...

この記事ではreactで複数の画像を選択してアップロードする方法をご紹介します。 後でご紹介するサンプルコードでは material UI v5axiostypescript を使用しています。 ご紹介するサンプルコードはコメントに画像を付けて投稿するフォームを想定していま...

useSWR()を使ってデータを取得するには以下の方法で取得できました。 const commentsFetcher = (url: string): Promise<fetchCommentsReturnType> => axios(url).then((res) => res.data); const { data: comments, error:commentsError } = u...

今回はReact Hook Form v7でMaterial UI v4のフォームを制御する方法をご紹介します。 Material UIのTextFieldやRadio、Selectは素直に動いてくれますが、Checkboxはちょっとしたコツ、工夫が必要です。サンプルコードをご紹介しますので是非参考にしてく...

React Hook FormでMaterial UIのCheckboxを制御でReact Hook Form v6でMaterial UIのCheckboxを制御する方法を紹介しました。 その後、React Hook Form v7がリリースされた。React Hook Form v7でMaterial-UIを制御する方法が少し変わりましたので、Materi...