MUI

React17 + MUI DateTimePicker + React Hook Form なアプリを yarn upgrade --latest したら破壊的変更が入っていたので修正した

以前、 React17 + MUI + React Hook Form なアプリを作り、以下のリポジトリとして保存していました。 https://github.com/thinkAmi-sandbox/react_mui_with_vite-sample 公開から時間が経過していたこともあり、せっかくなので最新のReactなどに追随するべ…

React Hook Form 7系と MUI 5系を組み合わせたフォームを作ってみた

React Hook Form 7系とMUI 5系を組み合わせてフォームを作る時に、色々悩んだことがあったのでメモを残します。 目次 環境 controlled component と uncontrolled component について Reactのフォームでは MUIでは React Hook Formでは 実装 フォームを作る …

React + React Hook Form v7 なフォームに、MUI v5 の DateTime Picker を組み込んでみた

React Hook Form に MUI の DateTime Picker を組み込んだところ、いくつか悩んだことがあったため、メモを残します。 目次 環境 作るもの 実装の流れ MUI で Modal を作る React Hook Form を使ってフォームを作る MUI DateTime Picker と組み合わせる セッ…

React + localeText 設定済の MUI DataGrid にて、フィルタ用 Custom Operator の value を標準の Operator と同じ値にすると、自動で翻訳される

以前、MUI DataGrid の列の filterOperators に自作の Custom Operator を設定して、独自のフィルタ機能を実装したことがありました。 React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使…

React + React Router v6 + MUI の Breadcrumbs で、動的ルーティングを含むパンくずリストを作ってみた

前回、MUI の Breadcrumbs のサンプルコードが React Router v6 では動かなかったため、React + React Router v6 + use-react-router-breadcrumbs を使って、パンくずリストを作ってみました。 React + React Router v6 + use-react-router-breadcrumbs でパ…

React + MUI DataGrid 用に作成した Custom Operator を、Jest + jest-mock-extended でテストしてみた

以前、 MUI DataGrid の Custom Operator を作りました。 React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使って表示・ソート・フィルタしてみた - メモ的な思考的な この時に作成した C…

React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使って表示・ソート・フィルタしてみた

React の MUI (旧 Material UI) では、コンポーネントとして DataGrid が提供されていることから、グリッド表示したい時に便利です。 React Data Grid component - MUI そんな中 const rows = [ { id: 1, name: 'シナノドルチェ', purchaseDate: [new Date(2…