Flowbite

Tailwind CSS ベースのライブラリ。

Build websites even faster with components on top of Tailwind CSS

準備

まずは T ...

TailWind CSS

Rapidly build modern websites without ever leaving your HTML.

Bootstrap とはまた違った感じの CSS フレームワーク なんでし ...

公式

ルールの無効化

対象のソースimport { useEffect, useState } from "react"const DebouncedInput = ({ value: initialValue, onC

今回は、前回の ファジー検索 の機能を付けたものに ソート の機能を加えていきます。

準備

TanStack Table v8 で React Table を使うのはこちら (*’▽’)

...

英数字to 全角

任意の文字列の中にある「半角英数字」を「全角英数字」に変換します。
それ以外の文字列は、そのままにします。

const toZenkaku = t =>t .replace(//g, x =>String ...

ひらがな⇔カタカナto ひらがな

任意の文字列の中にある「カタカナ」を「ひらがな」に変換します。
それ以外の文字列は、そのままにします。

実装const katakanaRegex =//g;const toHiragan ...

準備Leader Line

Draw a leader line in your web page.

こちらの React版 です。

LeaderLine のインストールnpm i leader-line-new使って ...

準備react highlight word のインストールnpm install react-highlight-words使ってみるイメージ

入力フォームに入れた文字を検索してハイライトします。

ついでに、このぐらいだと ...

準備

TanStack Table v8 で React Table を使うのはこちら (*’▽’)

バックエンドには、いつもの json-server を使います。

検索イメージシンプルな検索 ...

React 18 での変化点（の1つ）

コンポーネントがアンマウントされたあとに状態が更新されても、警告が出なくなりました。

でなくなった警告はこれです。

Warning: Can’t perform ...