技術FlowbiteNode.jsReactTailwind CSS

Thumbnail of post image 020
Flowbite

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

Build websites even faster with components on top of Tailwind CSS

準備

まずは T ...

技術Node.jsReactTailwind CSS

Thumbnail of post image 113
TailWind CSS

Rapidly build modern websites without ever leaving your HTML.

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

技術Reactメモ

Thumbnail of post image 006
公式

ルールの無効化

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

技術Node.jsReactReact Bootstrap

Thumbnail of post image 001

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

準備

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

...

技術JavaScriptメモ

Thumbnail of post image 129
英数字to 全角

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

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

技術JavaScriptメモ

Thumbnail of post image 009
ひらがな⇔カタカナto ひらがな

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

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

技術Node.jsReact

Thumbnail of post image 039
準備Leader Line

Draw a leader line in your web page.

こちらの React版 です。

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

技術Node.jsReact

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

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

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

技術Node.jsReactReact Bootstrap

Thumbnail of post image 143
準備

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

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

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

技術Node.jsReact

Thumbnail of post image 086
React 18 での変化点(の1つ)

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

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

Warning: Can’t perform ...