React.js ライブラリ集

React.jsで使用できるライブラリを掲載してます。環境構築等に関するリンクも掲載してます。

環境構築・使い方など

• React.jsをインストールしてHello Worldまでしてみる
• npm startを常駐化する
• コンポーネントの簡単な使い方
• react-routerの使い方
• npm start時にポートを変更する
• フォームに入力されたテキストをリアルタイムに表示する
• textareaの値をリアルタイムで表示する
• favicon(ファビコン)を変更する方法
• Axios利用時にCORSによるブロックを回避する方法
• 簡単なカウンターを作成する
• 乱数を生成して表示する
• プロパティ値を渡す
• 再レンダリング時のuseStateの値を確認する
• usestateに配列を利用する
• 配列をkey属性を使用して全て表示する
• styleを適用する
• バージョン確認方法

開発系

• axiosを使用してapiを取得する
• electron-react-boilerplateを利用してelectron-react.jsを利用してみる

静的サイトジェネレーター

• 静的サイトジェネレーター「Docusaurus」をインストールしてブログを作成する手順

ライブラリ集

エフェクト

• 「react-parallax-tilt」を使って パララックス（parallax）エフェクトをかける
• 「@twistezo/react-text-scramble」を使用してテキストにエフェクトをかける
• 「react-text-typing」を使ってテキストにエフェクトをかける
• 「react-pageflip」を使って本をめくるようなエフェクトをかける
• 「react-text-annotate」を使用してテキストをハイライト表示する

トースト

• 「react-toast-component」を使ってtoastを利用する
• 「react-hot-toast」を使ってtoastを実装する

モーダル

• 「react-modal」を使用してモーダルを実装する
• 「react-st-modal」を使ってmodalを実装する
• 「react-circle-modal」を使ってアニメーションがあるモーダルを作成する

カルーセル

• 「react-images」を使用してカルーセル(carousel)を実装する
• 「react-gallery-carousel」を使ってlazy loadingのあるカルーセルを作成する
• 「3d-react-carousal」を使ってカルーセルを実装する
• 「react-multi-carousel」を使って軽量なカルーセルを作成する

スライダー

• 「react-rubber-slider」を使ってちょっと変わったスライダーを実装する
• 「rc-slider」を使用して様々な種類のスライダーを作成する
• 「react-swipeable-views」を使用してスワイプも可能なスライドを作成する
• 「react-slick」を使用してスライダーを実装する
• 「react-bootstrap-range-slider」を使って色んなスライダーを実装する

メニュー

• 「react-modern-drawer」を使ってナビゲーション・ドロワーを使用する
• 「react-menu」を使ってメニューを実装する
• 「react-sidebar」を使用してサイドバーを作成する

フォーム

• 「react-autocomplete-input」を使ってシンプルなオートコンプリートを実装する
• 「downshift」を使用してオートコンプリート機能を実装する
• 「react-simple-options-selector」を使ってoptionタイプのボタンを作成する
• 「react-simple-timefield」を使用してシンプルな時刻入力フォームを作成する
• 「react-range-step-input」を使ってrangeを作成する
• 「react-hook-form」をインストールしてフォームにバリデーションをかける
• 「react-cool-form」を使ってフォームのバリデーションを実装する
• 「formik」をインストールしてフォームに入力チェックをかける
• 「react-text-annotate」を使用してテキストをハイライト表示する
• 「react-finderselect」を使ってファインダーセレクトを実装する
• 「react-multi-select-component」を使用してチェックボックスや検索が可能なセレクトメニューを実装する
• 「react-timezone-select」を使ってタイムゾーンのセレクトボックスを実装する
• 「react-verification-input」を使ってコード入力フォームを実装する
• 「react-easy-edit」を使用してインラインでフォームを編集する
• 「react-textarea-autosize」を使用してtextareaを自動で調整する
• 「react-select-search」を使って軽量の選択式のコンポーネントを利用する
• 「react-country-region-selector」を使用して国や地域をセレクトボックスに表示する
• 「react-autosuggest」を使用してサジェスト機能を実装する
• 「react-payment-inputs」を使用してクレジットカードの入力フォームを実装する
• 「react-tag-input」を使用してタグの作成フォームを実装する

日付

• 「react-datetime」を使用して日付ピッカーを実装する
• 「react-day-picker」を使用して日付ピッカーを実装する
• 「react-nice-dates」を使用してデザイン性の高いカレンダーを制作する
• 「react-dates」を使用してカレンダーを実装する

テーブル

• 「react-gridsheet」を使ってgoogleスプレッドシート風のUIを作成する
• 「react-table-scrollbar」を使ってテーブル内でスクロールを実装する
• 「react-flexy-table」を使ってtableを作成する
• 「mui-datatables」を使用して高機能なデータテーブルを作成する
• 「@saltyaom/react-table」を使って軽量なtableを作成する

ローディング

• 「react-loadingmask」を使ってローディング中であることを表示する
• 「react-spinkit」を使用してローディングアイコンを利用する
• 「styled-content-loader」を使ってloadingを表示する

イベント系

• 「nop-react-dropdown」を使って onclickでドロップダウンを実装する

アイコン

• 「akar-icons」を使って 丸みのあるアイコンを使用する
• 「react-icons」を使用して様々なアイコンを利用する
• 「react-iconly」を使ってアイコンを利用する
• 「pebble-icons」を使用して親しみやすいアイコンを作成する
• 「supercons」を使って フレンドリーで親しみやすいアイコンを使用する
• 「@icons-pack/react-simple-icons」を使用してアイコンを利用する
• 「@agney/react-loading」を使ってローディングアイコンを表示する
• 「react-loadingg」を使用して様々なloading アイコンを実装する
• 「github:brianhung/emojipicker」を使ってtwitterの絵文字を使用する
• 「phosphor-react」を使ってアイコンを使用する

アニメーション

• 「use-animate-presence」を使ってアニメーションを作成する
• 「react-spring」を使用してフェイドアウェイアニメーションを作成する
• 「react-motion」を使用してアニメーションを作成する
• 「react-spline」を使ってアニメーションを作成する

プログレスバー

• 「react-customizable-progressbar」を使って円形のSVGプログレスバーを実装する

グラフ・チャート

• 「react-plotly」を使って動かせるグラフを作成する
• 「g2plot-react」を使用して線グラフを作成する
• 「react-trend」を使用してトレンドグラフを作成する
• 「victory」を使用して棒グラフや線グラフを実装する
• 「react-sparklines」を使用して色んなタイプのグラフを作成する
• 「recharts」を使用してグラフを実装する

UI

• 「sonwan-ui」を使用する
• react-bootstrapでのbootstrapの利用手順
• reactstrapを使ってbootstrap4を導入する
• 「PrimeReact」をインストールして使用する
• 「Blueprint」をインストールして使用する
• 「Shards React」をインストールして使用する
• 「Elementz」を使用する
• 「office-ui-fabric-react」をインストールして使用する
• 「Shards React」をインストールして使用する
• 「React Suite」をインストールして使用する
• 「rebass」をインストールして使用する手順
• 「Onsen UI」をインストールして使用する
• 「Ant Design」をインストールして使用する
• 「semantic-ui-react」をインストールして使用する
• 「evergreen-ui」をインストールして使用する
• 「Grommet」をインストールして使用する
• 「primer」を使用してみる
• MATERIAL-UIを使用してみる

ファイル操作

• 「use-file-upload」を使ってファイルのアップロードを行う

画像

• 「react-photoswipe-gallery」を使ってphotoswipeを利用する
• 「react-inner-image-zoom」を使って画像をZOOMさせる
• 「react-zoom-pan-pinch」を使って画像を拡大・縮小して表示する
• 「rc-scrollbar」を使ってスクロールバーを実装する
• 「react-awesome-lightbox」をインストールして画像ビューワーを実装する
• 「react-image-gallery」を使用してイメージギャラリーを実装する
• 「react-image-zoom」を使って画像の一部をzoom表示する
• 「react-easy-crop」を使用して画像を切り取ったように表示する
• 「react-upload-gallery」を使用して画像ギャラリーを実装する
• 「react-image-shadow」を使って画像に影エフェクトをつける
• 「react-image-resizer」を使用して画像をリサイズする

カラーピッカー

• 「react-pick-color」を使用してカラーピッカーを実装する
• 「react-input-color」を使用してカラーピッカーを実装する
• わずか2kbのライブラリ「react-color-palette」を使ってカラーピッカーを作成する

ブラウザ

• 「react-easyfullscreen」をインストールしてフルスクリーンを実装する
• 「react-custom-scrollbars」を使用してスクロールバーを作成する

ファイル操作

• 「use-file-upload」を使ってファイルをアップロードする

カウントダウン

• 「use-countdown-timer」を使ってカウントダウンを実装する
• 「use-elapsed-time」を使ってカウントダウン機能を実装する
• 「react-countdown」を使ってカウントダウンを作成する

エディタ

• 「react-markdown-preview」を使ってマークダウンのプレビュー機能を実装する
• 「yamde」を使って軽量のmarkdownエディタを使用する
• 「react-ace」を使用してシンタックスハイライトを実装する
• 「react-codemirror」を使用してsublime風のコードエディタを実装する

その他

• 「react-xls」を使ってEXCELファイルをダウンロードする
• 「dark-mode」を使用してダークモードを実装する
• 「react-heat-map」を使ってヒートマップカレンダーを作成する
• 「react-virtuoso」を使ってリストを実装する
• 「react-svg-blob」を使ってSVGをblobする
• 「react-cool-virtual」を使って大きなデータセットをレンダリングする
• typing-testでタイピングテストを行う
• 「use-timer」を使ってタイマーを実装する
• 「boring-avatars」を使ってカラフルなアバターを作成する
• 「react-cool-dimensions」を使って要素のサイズを測定する
• 「react-curved-arrow」を使って曲がる矢印を表示する
• 「react-awesome-button」を使用してデザインされたボタンを実装する
• 「react-sortable-hoc」を使用してドラックアンドドロップで要素をソートする
• 「react-tagcloud」を使ってcloudtagを作成する
• 「react-collapse-pane」をインストールして可変な要素を実装する
• 「react-awesome-stars-rating」を使用して星型の評価を実装する
• 「react-collapsed」を使って展開・折りたたみ可能なコンポーネントを作成する
• 「react-announcement」を使ってサイトアナウンスのプッシュ通知を実装する
• 「react-toastify」を使用してアラート機能を実装する
• 「react-tooltip」を使用してツールチップを実装する
• 「react-qrbtf」をインストールしてデザイン性の高いオシャレなQRコードを実装する
• 「react-portal-overlay」を使ってオーバーレイ表示を実装する
• 「react-subscribe-card」カードフォーム型の電子メールをサブスクライブする
• 「interweave」を使用してHTMLを安全にレンダリングする
• 「react-split-pane」を使用して画面を分割する
• 「react-konva-grid」を使ってEXCEL風のグリッドを実装する
• 「react-widgets」を使用してドロップダウンリストを実装する
• 「react-tabs」を使用してタブを作成する
• 「react-media-recorder」を使って動画を表示する
• 「react-fast-marquee」を使ってmarqueeを作成する
• 「react-notification-timeline」を使って通知機能を実装する
• 「react-cool-onclickoutside」をインストールしてコンポーネントの外でのクリックをフックする
• 「react-dragswitch」を使ってトグルボタンを表示する
• 「react-card-with-image」を使ってカード型のイメージを作成する
• 「React-StableList」をインストールしてリストビューを実装する
• 「@inovua/reactdatagrid-community」を使ってデータグリッドを表示する
• 「react-simple-chatbot」を使用してchatbotを実装する
• 「react-split-flap-display」を使って反転フラップ式表示を実装する
• 「react-guitar」を使ってギターを作成する
• 「react-typewriter-effect」を使ってタイプライティングを実装する
• 「vertical-timeline-component-react」をインストールしてタイムライムを構築する
• 「react-chrono」を使ってタイムラインを実装する
• 「react-copy-mailto」を使ってメールアドレスのコピーを簡単に行う
• 「react-loading」を使用してローディングにスケルトンスクリーンを利用する
• 「react-treebeard」を使用してtreeを作成する
• 「react-simple-snake」を使ってsnakeゲームを利用する
• 「react-js-banner」を使用して数秒後に消えるバナーを実装する
• 「emotion-grid」を使ってグリッドシステムを利用する
• 「react-hook-qrcode」を使ってQRコードを生成する
• 「react-jsbarcode」を使ってバーコードを実装する
• 「react-simple-typewriter」を使って見栄えのいいタイプライターを使用する
• 「react-animated-term」を使ってターミナル風デザイン作成する
• 「react-spectrum」をインストールしてカラフルなtext placeholdersを生成する
• 「react-barcode」をインストールしてバーコードを生成する
• 「react-picture-annotation」を使ってannotation(アノテーション・タグを付ける)を実装する
• 「react-crossword」を使用してクロスワードを実装する
• 「bare-minimum-2d」を使ってSVGを利用する
• 「react-avatar」を使ってテキストアバターを作成する
• 「rc-gantt」を使ってガントチャートを実装する
• 「reactjs-visibility」を使って表示・非表示を検出する
• 「react-simple-knob」を使ってknobを実装する

エラー

• 「Unterminated JSX contents」が発生した場合の対処法
• npm start時にエラー「However, a different version of webpack-dev-server was detected higher up in the tree:」が発生した場合の対処法
• buildに時に画面に何も表示されずに真っ白な場合の対処法
• 「http-proxy-middleware」利用時にDEPTH_ZERO_SELF_SIGNED_CERTが発生した場合の対応方法
• 「× Unhandled Rejection (TypeError): Cannot read property ‘setState’ of undefined」が発生した際の対処法
• 「Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…?」が発生した場合の対応法

preact

• preact環境を構築して実行してみる

ReactOS

• ReactOSをインストールして利用する