React Components

Source: https://github.com/brillout/awesome-react-components at 66b2758c4808
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

 絶対に awesome React コンポーネントとライブラリ

AWESOMEコンポーネントのリストです。 ノーピー、それはすべての包括的なリストではありません React 太陽の下の部品。 「すごい」とはどういう意味ですか? まあ:

• それは本当の問題を解決します
• それは、とてもユニークな、美しい、または例外的な方法で行います。 (そして、それは超人気でよく知られていない…それらのリストにポイントはありません。)
• 最近の投稿 code コミット!

本当に素晴らしいプロジェクトのための OST を探します。 そして、メモのいくつかのリストの後、 (italic parens) で迅速なメンテナの解説とレビューを探します。

参照: Awesome React Frameworks.

メンター:

• @petebray, author of Fluxguard — monitor PROD website changes.
• @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

貢献する

お問い合わせ 貢献ガイドライン. 私たちは、このリストから1つ以上の非恐ろしいエントリを削除するためにすべてのPRを必要とするによって、このリストを新鮮に保ちます。 ALSOが削除する場合は、新しいリソースをPRしてください。

コンテンツの表

• UI コンポーネント
  • 編集可能なデータグリッド/スプレッドシート
  • テーブル
  • 無限スクロール
  • オーバーレイ
  • お知らせ
  • ツールチップ
  • メニュー
  • スティッキー
  • タブ
  • ローダー
  • キャップチャ
  • カルーセル
  • ボタン
  • ログイン
  • チャート
  • コマンドパレット
  • ツリー
  • UI ナビゲーション
  • カスタムスクロールバー
  • 可聴周波/ビデオ
  • サイトマップ
  • 時間/日付/年齢
  • 写真・画像
  • アイコン
  • パジネータ
  • Markdown ビューア
  • キャンバス
  • スクリーンショット
  • ツイート
  • フォームコンポーネント
    • 日付 / タイムピッカー
    • 絵文字ピッカー
    • 入力タイプ
    • オートコンプリート
    • 選択する
    • カラーピッカー
    • トピックス
    • スライダー
    • ラジオボタン
    • タイプ 選択
    • 札の入力
    • オートサイズ入力/Textarea
    • スター評価
    • ドラッグ&ドロップ
    • ソート可能なリスト
    • リッチテキストエディタ
    • Markdown ダウンロード
    • 画像編集
    • フォームコンポーネントコレクション
    • ツイート
    • シンタックスハイライト
• UI レイアウト
• UI アニメーション
  • パララックス
• UI フレームワーク
  • 責任ある
    • Material Design
  • モバイル
  • コンポーネントコレクション
• UI ユーティリティ
  • レポーター
    • 可視性レポーター
    • 測定レポーター
  • デバイス入力
    • キーボードイベント
    • スクロールイベント
    • タッチスワイプ
    • マウスイベント
  • メタタグ
  • サイトマップ
  • ユーザー行動をテストする
• Code Design
  • データストア
  • フォームロジック
  • ルーター
  • サーバからのプロップ
  • サーバとのコミュニケーション
  • CSS / スタイル
  • HTML テンプレート
  • Isomorphic アプリ
  • ボイラープレート
  • ツイート
• ユーティリティ
  • i18n
  • フレームワーク結合/統合
  • 第三者サービスとの連携
• パフォーマンス
  • UI
    • トピックス
    • レイジー負荷
  • アプリサイズ
  • サーバサイドレンダリング
• Dev ツール
  • テスト
  • Redux
  • トピックス
  • ツイート
• ツイート
  • 静的なウェブサイトの発電機
• クラウドソリューション
  • データベース

UI コンポーネント

Back to top ⬆️

編集可能なデータグリッド/スプレッドシート

• AG Grid - 高度なデータグリッド/データテーブルのサポート Javascript / React / AngularJS / Webコンポーネント。
• fortune-sheet - Excel と同様に、アウト・オブ・ザ・ボックス機能を提供するオンライン・スプレッズ・コンポーネント。
• gigatables-react - ソート、パジネーション/無限スクロール、グローバル/列検索、 AJAX クラウドなど
• Handsontable - demo - docs - スプレッドシートのようなデータグリッド UI サポート React, Angular, TypeScript そして、 JavaScript.
• jqwidgets-react-grid - フィルタリング、パジネーション、グループ化、Excelへのエクスポート、 PDF、CRUDおよび多く。
• MUI X Data grid - demo/docs - パワーユーザーと複雑なユースケースのための高度な機能を備えた迅速かつカスタマイズ可能なデータグリッド。
• react-data-grid - Excelのような格子。
• ReactGrid - demo/docs - アプリにスプレッドシートのような動作を追加
• revo-grid - demo/docs - 強力なデータグリッド React / AngularJS / Vue / 高度のカスタム化の網の部品。
• SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
• SVAR React DataGrid - demo - docs - React セル内編集、ツリーデータ、コンテクストメニュー、仮想スクロールなどのデータグリッド

テーブル

• ka-table - demo - ソート、フィルタリング、グループ化、仮想化、編集などのカスタマイズ可能なテーブルコンポーネント。

• mantine-datatable - demo/docs - マンチンのための軽量のテーブルの部品 UI たくさんの特徴の塗布、

• material-table - demo/docs - 上に構築 Material UI、プラス:グループ化、ツリーデータ、拡張可能な行、エクスポート、インライン編集

• mui-datatables - 作り付け Material UI. 検索、スタイリング、フィルタリング、サイズ変更/非表示の列、エクスポート、プリント、選択/展開行。

• react-data-table - demo/docs - 選択可能な行、拡張可能な行、ペジネーションを並べ替えて、アクセス可能で、応答性、対応可能

• TanStack Table - demo - ヘッドレス UI 強力なテーブルとデータグリッドを構築する

• react-table-library - demo - React 表ライブラリ — ほとんどのヘッドレステーブルライブラリ — より良いテーブルを構築します。

• rsuite-table - demo/docs - 仮想化をサポートするテーブルコンポーネント。

• DevExtreme React Grid - 高性能プラグインベースのデータグリッド Bootstrap そして、 Material Design.

• Smart React Grid - 高速で機能的なデータグリッド Material Design.

• simple-table - demo - docs - 軽量、速くおよび特徴豊富な。 ソート/フィルタリング、仮想化、ツリーデータ、ネストされたヘッダー、ピン留めされた列、カスタマイズされたスタイリングなど。

• KendoReact Grid - Paging、ソート、Excelへのエクスポートなどの100以上の既製の機能を備えた強力なデータグリッドコンポーネント。

• Material-React-Table - 十分に特色にされる Material UI TanStackのV5実装 React 表V8、地面から上に書かれている TypeScript

無限スクロール

• @egjs/react-infinitegrid - npm - demo - さまざまなレイアウトタイプに応じて無限にコンテンツを含むカード要素を整理するのに使用されるモジュール。
• react-lazyload - コンポーネント、画像、その他のパフォーマンスが重要である場合のレイジーロード。
• react-list - 多彩な無限スクロール React コンポーネント。
• @af-utils/virtual - demo/docs - レンダリングの大きいスクロール可能なリストおよび格子。
• react-window - demo - React 大規模なリストと表形式のデータを効率的にレンダリングするためのコンポーネント
• virtua - demo - ゼロ構成、速く、小さい(~3kB)のための仮想リストの部品 React, Vue そして固体。

オーバーレイ

ディスプレイオーバーレイ/モーダル/アラート/ダイアログ/ライトボックス/ポップアップ

• react-aria-modal - 十分にアクセス可能で、適用範囲が広いです React modal は一致しました WAI-ARIA 執筆練習。
• react-modal - アクセシブルなモーダルダイアログコンポーネント React.
• @paratco/async-modal - シンプルな非同期モーダルハンドラ React.
• reoverlay - demo - モーダルを管理するための不足しているソリューション。
• sweetalert2 - demo/docs - 美しく、敏感で、高度にカスタマイズ可能およびアクセス可能()WAI-ARIA) のための取り替え JavaScriptポップアップボックス。 ゼロ依存関係。
• sweetalert2-react-content - オフィシャルSweetAlert2エンハンサー追加サポート React コンテンツとしての要素

お知らせ

Toaster/スナックバー — モデレス一時停止ポップアップでユーザーを通知

• react-notifications-component - demo - 通知のための高度にカスタマイズ可能で、使いやすい部品。
• notistack - demo - docs - お互いの上に積み重ねることができる高度にカスタマイズ可能な通知スナックバー(トースト)
• react-local-toast - demo - docs - アプリ全体のトーストの代わりに、特定のコンポーネントにリンクされたフィードバックを表示します。
• react-toast - demo - docs - 最小限のトースト通知。
• 🚀 react-toastify - demo - 瞬間にそこに最善を尽くします。 ホック サポート。 参照無し。
• react-confirm-lite - demo - 軽量で約束ベースの確認ダイアログです。 React 組み込み Tailwind CSS サポート シンプルに使えるようにデザインされています。 react-toastifyは、完全にカスタマイズ可能なまま。
• reapop - ツイート React & Redux 通知システム。
• react-hot-toast - demo - 喫煙ホット通知のための React. ライト級選手、カスタマイズ可能およびデフォルトによって美しい。
• Sonner - ご意見・ご要望・ご要望 React.

ツールチップ

• react-tooltip - React ツールチップコンポーネント。

メニュー

メナス/サイドバー

• hamburger-react - demo/docs - アニメーションハンバーガーメニューのアイコン React.
• react-burger-menu - 効果とスタイルを持つオフカンバのサイドバー。
• react-offcanvas - オフキャンバスメニュー React.
• react-planet - demo - 惑星のように見える円形メニューを作成します。
• mantine-contextmenu - demo/docs - Mantineと造られる適用のためのコンテキスト・メニューのホック/component UI.

スティッキー

固定ヘッダー/スクロールアップヘッダー/スティッキー要素

• react-headroom - 必要に応じてヘッダーを非表示にします。
• react-stickynode - 出演者と総合力 React スティッキー。

タブ

• react-tabs - React コンポーネントのタブ。
• react-tabtab - React, タブ.

ローダー

Loaders / スピナー / 進捗バー — 何かがロードされていることをユーザーに知らせる

• react-loader-spinner - コレクションセット react-非同期動作のスプナー。
• react-redux-loading-bar - 簡単なローディング棒のための Redux そして、 React.
• react-spinners-css - 素晴らしいコレクション react Spinnersコンポーネント。
• react-spinners - スピンナーコンポーネントをロードするコレクション react.
• react-content-loader - SVG-Poweredコンポーネントは、プレースホルダーのロード(Facebookのカードロードなど)を簡単に作成できます。

キャップチャ

• react-simple-captcha - npm - demo - React シンプルなカプチャは非常に強力で、高度にカスタマイズ可能で使いやすいカプチャです React JSについて
• procaptcha - demo - docs - プライバシーは、無料のCAPTCHAを集中

カルーセル

• @egjs/react-flicking - npm - demo - それは信頼できる、適用範囲が広く、拡張可能なカルーセルです。
• react-awesome-slider - demo - フルページ、3Dアニメーション、60fpsメディアとコンテンツスライダ/カルーセル。
• pure-react-carousel - 傷から作られ、高く評価されていない。
• react-id-swiper - idangerous Swiper を idangerous Swiper として使うライブラリ ReactJs コンポーネント
• react-instagram-zoom-slider - demo - Instagramに触発されたズーム機能にピンチ付きのスライダコンポーネント。
• react-responsive-carousel - React.js レスポンシブカルーセル(スワイプ付き)。
• react-slick - React カルーセルコンポーネント。
• keen-slider - demo - パフォーマントカルーセル/スライダと native タッチ/スワイプ動作。
• swiper - demo - docs - ハードウェアの加速された転移および驚くべき最も現代自由な移動式接触スライダー native 行動。

ボタン

• react-awesome-button - demo - ロード進行と社会的共有アクションで3Dアニメーション60fpsボタン。
• reactive-button - demo - docs - 進行インジケーターを備えた美しいアニメーションボタンコンポーネント。

ログイン

• react-accessible-accordion - アクセシブルなアコーディオンコンポーネント React.
• react-collapse - コンポーネント・ラッパー でアニメーションを崩壊させる react-感情。
• react-tabbordion - demo - ユニバーサル、セマンティック、 CSS-アコーディオンとタブを作成するコンポーネントのみ。

チャート

チャート/グラフ/図表にデータを表示

• essential js 2 charts - 美しくインタラクティブなチャートとグラフ react.
• EazyChart - demo - docs - データを意味のあるチャートに簡単に変換
• echarts for react - 美しい Apache Echarts の周りの Wrapper
• jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
• react-chartist - React Chartist.js のコンポーネント
• react-charty - demo - 複数のチャートタイプ、アニメーション、ズーム、テーマで、小型で強力なインタラクティブなデータヴィーズ。
• react-chartjs-2 - よくある質問 react Chart.js 2.0 を使ってコンポーネントをグラフ化します。
• react-d3-components - D3コンポーネント React.
• react-google-charts - React-Googleチャート React コンポーネント。
• react-highcharts - React-ハイチャーツ。
• react-sparklines - 美しく表現力のあるスパークライン React コンポーネント。
• react-timeseries-charts - 決定的な時系列チャート。
• react-vis - データ可視化ライブラリ React と d3.
• recharts - 再定義されたチャートライブラリは、 React と D3.
• rumble-charts - React 互換性のある柔軟なチャートを構築するためのコンポーネント。
• victory - データバイス React.
• semiotic - Semiotic はデータ可視化フレームワークです。 React.
• SVAR React Gantt - demo - docs - カスタマイズ可能なインタラクティブガントチャートコンポーネント
• DevExtreme React Chart - 高性能プラグインベースチャート Bootstrap そして、 Material Design.
• Smart React Chart - 特徴 完全なチャート作成ライブラリ。
• react-muze - React ラッパー用 muze(WebAssemblyを使用して、ブラウザでデータを視覚化するための無料のデータ可視化ライブラリ)
• Flowchart React - フローチャート&フローチャートデザイナー React.js.
• react-dashboard - Isomorphicダッシュボード。

コマンドパレット

• cmdk - 速く、composable、unstyled コマンド メニュー React.
• kbar - demo - 速く、携帯用および拡張可能なcmd+kインターフェイス。

ツリー

ツリーデータ構造を表示

• json-edit-react - demo - JSON/Object ツリービューアとエディタを高度に構成可能
• react-arborist - demo - フル機能ツリービュー:ヘッドレス、仮想化、マルチ選択、ドラッグ&ドロップ、キーボードナビゲーション、検索
• react-complex-tree - demo - docs - 複数の選択、ドラッグ アンド ドロップおよび調査の途上国指定のアクセシブル ツリーの部品
• he-tree-react - demo - docs - 木、カスタマイズ可能 UI、平らなデータ、木データ、ドラッグ・アンド・ドロップ、ドロップのためのプレースホルダー、折り畳み式、チェックボックス、仮想化。

UI ナビゲーション

ビューをナビゲートするウェイ

• react-scroll - React スクロールコンポーネント。
• react-swipeable-views - ツイート React 結合されたタブとスワイプ可能なビューのコンポーネント。

カスタムスクロールバー

• rc-scrollbars - demo - フレックスオプションと60FPSのカスタマイズ可能なスクロールバー
• react-custom-scroll - demo - ブラウザのスクロールバーを簡単にカスタマイズ native OS のスクロール動作。
• react-shadow-scroll - スクロール時に画像をカスタマイズして影を差し込みます。

可聴周波/ビデオ

• react-dailymotion - Dailymotionプレーヤーコンポーネント React.
• react-player - ツイート react YouTubeを含むさまざまなURLを再生するためのコンポーネント。
• react-soundplayer - カスタムのSoundCloudプレーヤーを作成 React.
• react-youtube - React.js パワードYouTubeプレーヤーコンポーネント。
• video-react - HTML5の世界に向けて構築されたウェブビデオプレーヤー React ライブラリ。
• material-ui-audio-player - オーディオプレーヤー material ui design.
• react-vision-camera - カメラコンポーネント React getUserMedia を使う。 バーコードスキャン、テキスト認識などのコンピュータビジョンタスクにこのコンポーネントを使用できます。
• react-barcode-qrcode-scanner - バーコードとQR code スキャナーコンポーネント React. それは使用します react-カメラとDynamsoftバーコードリーダーにアクセスしてバーコードを読み取ります。

サイトマップ

• google-map-react - ユニバーサルグーグルマップ react コンポーネントは、レンダー react グーグルマップ上のコンポーネント。
• mapkit - 注釈、オーバーレイ、検索で、MapKit JSを使用してAppleマップを統合するためのライブラリ。
• pigeon-maps - demo - ReactJS 外部の依存関係のないマップ。
• react-geosuggest - ツイート React GoogleマップがAPIを配置するための自動提案。
• react-leaflet - React リーフレットマップのコンポーネント。
• react-map-gl - ツイート React MapboxGL-jsとオーバーレイAPI用のラッパー。
• react-svg-map - demo - インタラクティブなSVGマップを表示するコンポーネントのセット。

時間/日付/年齢

表示時間/日付/年齢

• react-timeago - シンプルなタイムアゴコンポーネント ReactJs.
• timeago-react - フォーマット日付と *** time ago ステートメント。 例: ‘3 時間前に’.
• react-google-flight-datepicker - Googleのフライト日付ピッカーが実施 ReactJS.

写真・画像

画像の表示/写真

• lightGallery - demo - docs - フル機能のライトボックスギャラリーコンポーネント。
• react-compare-image - demo - React スライダーを使用して2つの画像を比較するコンポーネント。
• react-image-gallery - レスポンシブイメージギャラリー、カルーセル、イメージスライダ react コンポーネント。
• yet-another-react-lightbox - demo - docs - React lightboxコンポーネント。
• react-intense - ツイート React 大きいイメージを間近で見るためのコンポーネント。
• react-photo-album - demo - docs - 応答性 React フォトギャラリー
• react-svg-pan-zoom - ツイート React パンとズーム機能をSVGに追加するコンポーネント。
• react-particle-image - demo - インタラクティブな粒子としてレンダリング画像。
• react-imgix - 画像、画像、背景などの高速で応答性の高い画像を追加!
• @frameright/react-image-display-control - ズーム領域を定義して、スマートな応答画像を作成します。
• zoom-image - demo - docs - Web上で画像をズームするための少しまだ強力なフレームワークアグノスティックライブラリ
• react-infinite-gallery – Infinite-scroll image gallery component for React apps.

アイコン

表示アイコン/アイコンセット/絵文字

• iconify-react - 全人気アイコンと絵文字セットを含む50以上のアイコンセットから40k以上のアイコン。
• react-icons - スヴォーグ react ES6のインポートで人気のアイコンパックのアイコン。
• react-open-doodles - 素晴らしい無料イラストとして react コンポーネント。
• react-icomoon - と react-icomoon では、選択したアイコンや icomoon で簡単に作成できます。
• tabler-icons-react - 450以上のMITライセンスの高品質SVGアイコンをセット。
• Lucide - コミュニティによって作られた美しく一貫性のあるアイコンツールキット。 オープンソースプロジェクトとフェザーアイコンのフォーク。

パジネータ

制御要素をpaginate に表示する

• react-paginate - ツイート ReactJS pagination を作成するコンポーネント。
• react-laravel-paginex - Laravelパジネーション ReactJS (カスタマイズ可能)。
• paginated - React props をレンダリングし、pagination をビルドするためのカスタム ホック。
• react-steps - Demo - 応答性 React ステッピング。

Markdown ビューア

ディスプレイはマークドウソースを解析

• react-markdown - リンダー Markdown として React コンポーネント。

キャンバス

キャンバスまたはSVG を使用したスケッチ入力

• react-konva - React コンヴァは JavaScript Konvaフレームワークにバインディングを施した複雑なキャンバスグラフィックを描画するためのライブラリ。
• react-sketch - スケッチツール React ベースアプリケーション、FabricJSによるバックアップ
• react-sketch-canvas - Demo フリーハンドベクトル描画ツール React SVGをキャンバスに使用 マウス、タッチ、グラフィックタブレットからの入力を受け入れます
• react-heat-map - 軽量カレンダーヒートマップ react SVGで構築されたコンポーネント、カスタマイズ可能なバージョン GitHubの貢献グラフ。

スクリーンショット

• html2canvas - ウェブページの任意の部分のスクリーンショットを撮る Javascript.

ツイート

• puck - demo - セルフホスト型ビジュアルエディタ React
• react-advanced-news-ticker - demo - 柔軟でアニメーション的な垂直ニュースティッカーコンポーネント
• react-avatar-generator - ユーザーがアバターとして使用するためにランダムなカレイドスコープを作成することを可能にします。
• react-awesome-query-builder - demo - フォームフィールド、SQL、MongoDB、JSONエクスポートのビジュアルクエリビルダー
• react-blur - React 空白の背景のためのコンポーネント。
• react-demo-tab - demo - A React コンポーネントは他のコンポーネントのデモを簡単に作成できます。
• fastcomments-react - demo - ページまたはSPAにライブコメントスレッドを埋め込むためのFastCommentsコンポーネント。
• react-pdf-viewer - docs - A React コンポーネントを表示 PDF ドキュメント。
• react-simple-chatbot - demo - 会話チャットを作成する簡単なチャットボットコンポーネント。
• react-file-reader-input - ファイル入力コンポーネントは、スタイリングと抽象化を読み込みます。
• react-filter-control - ザ・オブ・ザ・ React filterbuilder コンポーネントは、フィルタの基準を構成します。 UI.
• react-headings - オートインクリメント HTML コンポーネント構造に関係なく、アクセス性やSEOを向上させるための見出し(h1、h2など)は、レンダリングされたものの完全な制御を維持します。
• react-joyride - ウォークスルーやガイド付きツアーを作成 ReactJS アプリ。 スタンドアローンツールチップで今すぐ!
• react-mouse-select - Demo 選択できるコンポーネント DOM マウスを動かすことによって要素
• react-resizable-and-movable - Resizableおよび取り外し可能な部品のための React.
• react-resizable-box - 再構成可能なコンポーネント React. #reactjs.
• react-searchbox-awesome - demo - ミニチュア検索ボックス。
• react-split-pane - React スプリットパンコンポーネント。
• react-swipe-to-delete-ios - demo - リスト内の項目を削除するには、iOS が同じようにします。
• react-swipeable-list - demo - リストをスワイプ可能な項目でレンダリングする構成可能なコンポーネント。
• typography - 美しいタイポグラフィを持つウェブサイトを構築するための強力なツールキット。
• react-pulse-text - demo/docs - 別のコンポーネントの任意のプロパティのテキストをアニメーション化することができます。
• captcha-image - オプションでランダムなキャプチャイメージを生成することができます。
• react-pdf - PDF を表示 React 画像があったら簡単にアプリ。
• react-customizable-chat-bot - Demo - あなたのブランドのニーズに合ったチャットボットを作成しましょう。
• @restpace/schema-form - Demo - JSON スキーマから複雑なフォームを自動的に簡単に作成できます。
• react-darkreader - ツイート React darkreaderにインスパイアされたサイトにダーク/ナイトモードを追加するためのホック。
• react-apple-signin-auth - アップルのサインイン React 公式のApple JS SDKを使って下さい。
• react-mrz-scanner - ツイート React パスポート、ビザカードなどでMRZをスキャンするコンポーネント それはDynamsoftのラベルの認識装置に基づいています。

フォームコンポーネント

ユーザーがデータを入力するように

日付 / タイムピッカー

日付ピッカー/時間ピッカー/日付ピッカー/日付範囲ピッカー

• date-range-picker - demo - 日付、範囲及び範囲の選択を支えるカレンダーの部品。
• react-big-calendar - カレンダーコンポーネントのようなGcal/outlook。
• react-datepicker - シンプルで再利用可能なDatepickerコンポーネント React.
• react-day-picker - 柔軟な日付ピッカー React.
• react-flatpickr - フラットピッカー React.
• react-simple-timefield - demo - 簡単な時間の入力分野。
• react-timezone-select - demo - 動的、succinct タイムゾーン選択。 会社概要 react-select.
• DevExtreme React Scheduler - 高性能プラグインベースのスケジューラ/カレンダー Material Design.
• jQWidgets Scheduler - 特徴 完全な Scheduling の図書館。
• react-calendar - 究極のカレンダー React アプリ。
• react-date-picker - あなたの日付ピッカー React アプリ。
• schedule-x - Material design イベントカレンダーと日付ピッカーコンポーネント。 デモサイト: https://schedule-x.dev/

絵文字ピッカー

• interweave-emoji-picker - ツイート React Interweave と Emojibase が開発した emoji ピッカー。

入力タイプ

入力、専用入力、Eメール/電話番号/クレジットカード/その他

• react-credit-cards - 支払いフォームの美しいクレジットカード。
• react-payment-inputs - demo - 決済カード入力フィールドに役立ちますゼロ依存コンテナ。
• react-input-mask - demo - その他 react 入力マスキングのためのコンポーネント。
• @lunasec/react-sdk - docs - すべてのデータを自動的に暗号化/トークン化する、固定された形態の部品。
• react-numpad - demo - 数字、日付、時刻の拡張可能なナンバー パッド制御。
• react-multi-email - demo - 複数のメールをユーザタイプとしてフォーマットします。

オートコンプリート

Autosuggest/オートコンプリート/typeahead

• react-autosuggest - WAI-ARIA コンプライアンス React autosuggestコンポーネント。
• react-typeahead - ピュア react-typeaheadおよびtypeahead-tokenizerに基づく。

選択する

• react-aria-menubutton - 十分にアクセス可能で、容易に主題的、 React-パワードメニューボタン。
• react-functional-select - demo - マイクロ サイズ及びマイクロ最適化された選択の部品のための React.js.
• react-mobile-picker - demo - 選択ボックスコンポーネントのようなiOS。
• react-select - 選択制御と組み合わせて React JSについて
• react-column-select - カラムは、ビルドされたコンポーネントを選択します。 react.
• react-select-search - demo - 軽量選択コンポーネント React

カラーピッカー

• coloreact - 小さい色のピッカーのための React.
• react-color - 小さな色のピッカーウィジェットコンポーネントは、 React アプリ。
• react-colorful - 小さな(2,5 KB)、無依存性、高速でアクセス可能なカラーピッカーコンポーネント。
• react-input-color - React hsv色のピッカーが付いている入力色の部品。

トピックス

• @anatoliygatt/heart-switch - demo - 完全にテーマとアクセス可能なハート型トグルスイッチコンポーネント。
• react-ios-switch - React スイッチコンポーネント。
• react-toggle - エレガントなアクセス可能なトグルコンポーネント React. また、栄光のチェックボックス。
• ui-switch - 最も完全な Toggle コンポーネント

スライダー

• react-slider - スライダーコンポーネント React.

ラジオボタン

• react-radio-group - より良いラジオボタン。

タイプ 選択

ユーザが typing で何か (例えば、タグ) を選択してみましょう。

• react-autocomplete-input - オートコンプリート入力フィールド React.
• react-mentions - テキストエリアの人々を言及.
• rich-textarea - テキストを色付け、強調表示、装飾し、オートコンプリートするテキストエリア。

札の入力

1つのinput に複数のタグを追加してみましょう

• react-tag-input - あなたの素晴らしいシンプルなタグ付けコンポーネント React プロジェクト。
• react-tagsinput - シンプル react タグを入力するコンポーネント。
• react-tokeninput - Tokeninput コンポーネント React.
• tagify - demo & docs - 軽量で効率的なタグ入力コンポーネント。

オートサイズ入力/Textarea

• react-input-autosize - オートレス化入力フィールド React.
• react-autowidth-input - 非常に構成可能で、拡張可能はホックによって造られる自動的に大きさで分類された入力分野自動的に。
• react-textarea-autosize - <textarea />コンポーネント React コンテンツで成長する。

スター評価

• react-rating - demo - ゼロ依存性、高度にカスタマイズ可能な評価の部品。
• react-awesome-stars-rating - demo - アクセシビリティを備えたスター評価コンポーネント。
• react-star-rating-input - React.js 0-5(以上)星に入るコンポーネント。

ドラッグ&ドロップ

• react-beautiful-dnd - リストの美しいアクセス可能なドラッグ&ドロップ React
• react-dnd - ドラッグ&ドロップ React.
• react-drag-sizing - 「サイズ変更」として React コンポーネント。
• react-draggable - React ドラッグ可能なコンポーネント。
• react-dragula - ドラッグ&ドロップで簡単に傷つきます。
• react-dropzone - シンプルなHTML5ドラッグドロップゾーン React.js.
• react-movable - 垂直ドラッグとリストとテーブルのドロップのためのアクセシブルでミニマルな(<4kB gzipped)ライブラリ。
• react-sortable-pane - ソート可能で再現可能なペインコンポーネント React.
• neodrag - ドラッグするためのマルチフレームワークライブラリ。 フレームワークを選択すると、ドラッグAPIの動作が同じになります。

ソート可能なリスト

ユーザがリストで注文を定義してみましょう

• react-anything-sortable - タッチサポートとIE8の互換性で子供をソートします。
• sortablejs - ドラッグアンドドロップ、リスト内、リスト内のリオーダー可能です。

リッチテキストエディタ

• alloyeditor - WYSIWYGエディタは、完全に書き換えられたCKEditorに基づく UI.
• ckeditor4-react - 公式CKEditor 4リッチテキストエディタラッパー。
• ckeditor5-react - 公式CKEditor 5リッチテキストエディタラッパー。
• draft-js - ツイート React テキストエディタの構築のためのフレームワーク。
• edtr-io - demo - docs - プラグイン付きのWYSIWYGインラインWebエディタ。
• megadraft - ドラフト.jsの上に構築されたリッチテキストエディタ。
• react-ace - エース(上級) Code エディタ) ラッパー。
• react-codemirror - demo - コードミラーコンポーネント React.
• react-contenteditable - React 編集可能な内容でdivのコンポーネント。
• react-draft-wysiwyg - WYSIWYGエディタは、トップ上に構築 DraftJS.
• react-editor - 画像を差し込むことができる簡単なリッチテキストエディタ HTML.
• react-medium-editor - 媒体の編集者ラッパー。
• react-monacoeditor - モナコエディタコンポーネント React.
• react-simple-code-editor - シンプルなフリル code シンタックスハイライトのエディタ
• react-quill - クイルラッパー。
• react-trumbowyg - Trumbowyg ラッパー。
• remirror - demo - docs - ProseMirrorツールキット React.
• slate - demo - docs - 豊富なテキストエディタを構築するための完全にカスタマイズ可能なフレームワーク。
• smartblock - demo - docs - ProseMirrorに基づいてWYSIWYGエディタベースのブロック。
• tiptap - demo - docs - ウェブアーティストのためのヘッドレスエディタフレームワーク。

Markdown ダウンロード

• react-simplemde-editor - React コンポーネント用ラッパー EasyMDE (the most fresh SimpleMDE fork).
• react-markdown-editor - ツイート markdown エディタの使用 React/Reflux。
• react-md-editor - シンプル markdown プレビュー付きエディタ、実装 React.js そして、 TypeScript.

画像編集

画像操作

• react-avatar-editor - Facebookのような、アバター/プロフィールの映像の部品。
• react-avatar-generator - ユーザーのアバターのための楽しいカレイドスコープを生成します。
• react-easy-crop - コンポーネントは、簡単なインタラクションで画像/ビデオをクロップ/回転させます。 タッチフレンドリー。
• react-image-crop - レスポンシブなイメージクロッピングツール React.
• react-image-cropper - イメージクロップパー。
• react-advanced-cropper - ツイート react cropper ライブラリを使用して、ウェブサイトに適したクロップパーを作成できます。 design.
• react-mobile-cropper - 使いやすいイメージクロッピングライブラリは、一般的なAndroidのクロップパーによって非常に刺激されます。 会社概要 react-advanced-cropper.

フォームコンポーネントコレクション

• formsy-material-ui - ホルムシーの互換性ラッパー Material UI フォームコンポーネント。
• formsy-react-components - Aセット React JS コンポーネントはフォーマルで使うreact フォーム
• react-input-enhancements - 入力制御のための強化のセット。
• react-widgets - à磨かれた、拡張可能およびアクセス可能な入力のlaのカルト セット。

ツイート

• @anatoliygatt/numeric-stepper - demo - 完全にテーマとアクセス可能な数値ステッピングコンポーネント。
• interweave - React 安全にレンダリングするライブラリ HTML, 属性をフィルタリング, 一致するテキストの自動ラップ, 絵文字をレンダリング, など.
• react-designer - 簡単に構成、軽量、編集可能なベクトルグラフィック react コンポーネント。
• react-upload-gallery - React アップロードイメージギャラリーのため。 ドラッグ&ドロップ、ソート可能、カスタマイズ。

シンタックスハイライト

• react-syntax-highlighter - Prismjs または Highlightjs AST のコンポーネントをインラインスタイルで強調表示します。

UI レイアウト

Back to top ⬆️

アプリのUI をレイアウトする Components

• autoresponsive-react - 自動レスポンシブグリッドレイアウトライブラリ。
• hedron - スタイル化されたコンポーネントによって動力を与えられる nofrills の flexbox の格子システム。
• m-react-splitters - スプリッタコンポーネント, 書かれています。 TypeScript.
• muuri-react - demo - docs - レスポンシブ、ソート可能、フィルタブル、ドラッグ可能なグリッドレイアウト。
• react-grid-layout - レスポンシブなブレークポイントでドラッグ可能なグリッドレイアウト React.
• react-layman - demo - タブ付きの動的タイルレイアウトマネージャ
• react-masonry-component - @desandro’s Masonry 用の Wrapper です。
• react-reflex - 高度なフレックスレイアウトコンテナコンポーネント React ウェブアプリケーション。
• react-spaces - demo/docs - 固定、再構成可能、スクロール可能な部品。
• react-stonecutter - グリッドレイアウトコンポーネントのアニメーション化
• react-colrow - レスポンシブグリッドレイアウトコンポーネント。 会社概要 css フレックスボックス。 fractionの幅、自動成長を支えて下さい。
• react-schematic - demo - 任意のテーマ構成のオーバーヘッドなしでスタイルされた回路図を使用してレスポンシブレイアウトを構築

UI アニメーション

Back to top ⬆️

アニメーション移行

• data-driven-motion - データを簡単にアニメーション化できます。
• react-animatable - WebアニメーションAPIを使用したアニメーションライブラリ。
• react-anime - 超簡単なアニメーションライブラリ。
• react-flip-move - 楽しいアニメーション DOM FLIP技術を用いた変更(リスト再オーダー)
• react-gsap-enhancer - パワーを最大限に活用 React そして一緒にGSAP。
• react-tsparticles - インタラクティブなパーティクルアニメーションを簡単に作成できる軽量コンポーネント
• react-motion - アニメーションの問題を解決する春。
• react-mt-svg-lines - Wrapper は、SVG でラインストロークをアニメーション化します。
• react-router-transition - トランジションは、 react-router、動力を与えられる react-感情。
• react-spring - 春の物理ベースのアニメーションライブラリ。
• react-ts-typewriter - demo - どんなテキストでも使いやすく、カスタマイズ可能なタイプライター効果。
• framer-motion - アニメーションとジェスチャーライブラリ。
• react-spark-scroll - スクロールベースのアクションとアニメーション react.
• react-track - 位置を追跡する DOM 要素。 クールなアニメーションを作成します。
• react-transitive-number - 数値文字列に遷移効果を適用します。, ラ 古いGrouponタイマー.
• react-web-animation - React Web Animations API のコンポーネント -.
• auto-size-transition - 内部の子供のサイズに応じて動的にスケールするコンポーネント
• react-particles-bg - 粒子の背景。
• gooey-react - demo/docs - gooeyの効果のための React、形のblobbing/metballsに使用する。
• react-voodoo - demo/samples - Additive アニメーションエンジンは、複雑な Android/iOs のようなアニメーションを可能にし、SSR のスライダをレンダリングし、予測的な慣性、マルチタッチなど

パララックス

• simple-parallax-js - demo - パララックス効果を得る最も簡単な方法 React そして、 JavaScript イメージ
• react-parallax-tilt - demo - 簡単にコンポーネントにパララックスチルトホバー効果を適用します。

UI フレームワーク

Back to top ⬆️

責任ある

コンポーネントのセット+レスポンシブレイアウトシステム

• ant-design - demo/docs - A UI Design 中国からの言語。 個人のお客様 components 利用できる。
• atlaskit - アトラスシアンの公式 UI ライブラリ、 badge から tree table までのコンポーネント。
• base web - ベースウェブは、Webプロダクトの立ち上げ、進化、統一の基盤です。
• carbon - demo/docs - A design IBMが構築したシステム。
• cdbreact - demo - docs - エレガント UI モバイルファースト、レスポンシブなWebサイト、Webアプリの構築のためのキットライブラリと再利用可能なコンポーネント。
• chakra-ui - demo/docs - 簡単、モジュラー及びアクセス可能 UI あなたのコンポーネント React アプリケーション。
• ChatUI - demo/docs - ザ・ UI design 言語と言語 React 会話ライブラリ UI
• CoreUI for React - demo/docs - オープンソース UI コンポーネントライブラリ。
• evergreen - demo/docs - エバーグリーン React UI セグメント別フレームワーク
• fluentui - UXフレームワークは、共有する美しいクロスプラットフォームアプリを作成する code, design, 相互作用の動作.
• gestalt - demo/docs - Pinterestの対応コンポーネントのセット design 言語。
• grommet - 企業アプリケーション向けの最も高度なUXフレームワーク。
• kokonut-ui - 自由な現代およびカスタマイズ可能 UI コンポーネント。
• Mantine - demo/docs - 100以上のホックおよび部品が付いている十分に特色にされた図書館 native ダークテーマのサポート
• orbit - 旅行指向のプロジェクトを造るための部品。
• flowbite-react - オープンソース UI コンポーネントライブラリに基づく React, Tailwind CSSフロービト
• primereact - A 完了 UI フレームワーク 50以上のコンポーネント material, bootstrap そして注文の主題。
• radix-ui - 高品質を築き上げるための非加工、アクセス可能なコンポーネント design システムとWebアプリ。
• react-bootstrap - Bootstrap 組み立てられた部品 React.
• react-foundation - 基礎として React コンポーネント。
• reakit - demo/docs 豊富なWebアプリの構築
• searchkit - React UI コンポーネント/ウィジェット。 Elasticsearch で素晴らしい検索体験を構築する最も簡単な方法。
• semantic-ui-react - オフィシャル・セマンティックUI-React 統合。
• semi-design - demo/docs - 現代、広範囲、適用範囲が広い design システム。
• shadcn/ui - demo - docs - あなたのアプリにコピーして貼り付けることができる美しく設計されたコンポーネント。
• shineout - demo - コンポーネントの中国語対応セット:フォーム要素、ナビゲーション、テーブル、ツリー、ツリー選択ドロップダウンなど
• Tremor - demo - docs - チャートとダッシュボードをビルドするためのオープンソースコンポーネント。
• untitled-ui-react - demo - 組み立てられたコンポーネントの美しいコレクション React Aria そして、 Tailwind CSS.

Material Design

• 🚀 Material UI - コンポーネントの完全なスイート。 自分で構築 design システム、または開始 Material Design.
  • Autocomplete - アクセシブルなオートコンプリート、コンボボックス、マルチセレクト
  • Material Icons - 1,000+SVG(SVG) material アイコン。
  • Modal - アクセシブルなモーダル ダイアログ コンポーネント。
  • Slider - アクセシブルなスライダーコンポーネント。
  • Table - ソート、選択、パジネーション、仮想化したテーブル。
  • Tree View - アクセシブルツリービューコンポーネント React.
• react-essence - エッセンシャル - エッセンシャル Material Design フレームワーク
• react-materialize - Material design お問い合わせ react、材料化物によって動力を与えられる。
• react-toolbox - Aセット React Googleのコンポーネント実装 Material Design.
• mdbootstrap - React Bootstrap お問い合わせ Material Design

モバイル

• antd-mobile - 設定可能なモバイル UI 中国から。
• Ionic React - Ionic Framework:Android、デスクトップ、プログレッシブWebアプリを1つで簡単に構築 code ベース。
• OnsenUI - demo/docs - モバイルアプリフレームワークと Material そしてフラット(iOS)のデザイン。 Webコンポーネントに基づく。

コンポーネントコレクション

• blueprint - demo - docs - UI デスクトップ(モバイルではない)アプリケーション用の複雑なデータ密なWebインターフェイスを構築するツールキット。
• dataminr-react-components - 再利用可能な回収 React コンポーネントとユーティリティ機能。
• shards-react - docs/demo - 美しくモダンな React design システム。 フリーミウム
• aframe-react - A-Frame で仮想現実体験を構築し、 React.
• react-admin - REST および GraphQL サービスのトップで管理者ユーザーエクスペリエンスを構築します。
• refine - demo - docs - データ集約型アプリケーションをゼロに構築 それはAntで出荷します Design 企業レベルのシステム UI ツールキット。
• matrix-card - demo - 行列の雨スタイルのカードを生成する最も簡単なコンポーネント。
• rsuite - demo/docs - 「エンタープライズシステム製品」のコンポーネントのスイート。
• lens-ui - docs - シンプルさに焦点を当てたコンポーネントのスーツ。
• Tailwindadmin - docs - 既製のShadCNのコレクション UI 直接接続できるコンポーネント React/Next.js プロジェクト。

UI ユーティリティ

Back to top ⬆️

レポーター

レポート計算スタイル

可視性レポーター

コンポーネントが見える/hidden のときの報告

• react-intersection-observer - React Intersection Observer API の実装。
• react-visibility-sensor - センサーコンポーネント。
• react-waypoint - ツイート React 要素にスクロールするときに関数を実行するコンポーネント。

測定レポーター

要素の測定とレポートの決定

• react-component-queries - 幅および/または高さに基づいて、コンポーネントにプロップを提供します。
• react-container-dimensions - 要素のサイズを検知する Wrapper コンポーネント。
• react-dimensions - React コンテナの寸法を取得するには、より高い順序コンポーネント。
• react-height - コンポーネント・ラッパーは、子供要素の高さを特定し、報告します。
• react-measure - 計算の計算 React コンポーネント。
• react-sizeme - あなたの React 幅と高さを意識した部品。

デバイス入力

アクションに入力したユーザを強制する

キーボードイベント

• react-hotkeys - 決定的なホットキーとフォーカスエリア管理のための React.
• react-key-handler - React キーボードイベントを処理するコンポーネント。
• react-keydown - 軽量のキーダウンのラッパーのための React コンポーネント。
• react-shortcuts - キーボードショートカットを1か所から管理します。
• useKeyCapture - ターゲット/グローバルのキープレスリスナーを容易にするためのカスタムホック。
• react-keyboard-navigator - スイート React コンポーネントとキーボードから兄弟コンポーネントを選択するためのホック。

スクロールイベント

• react-scroll-components - コンポーネントのセット react ページのスクロールに。

タッチスワイプ

• react-swipe - Swipe.js を React コンポーネント。

マウスイベント

• react-hook-mighty-mouse - demo - 選択した要素でマウスイベントを追跡するホック。

メタタグ

メタタグの設定、

• react-helmet-async - スレッドセーフヘルメット React 16+ 友達
• react-helmet - ドキュメントヘッドマネージャー React.

サイトマップ

任意で要素をレンダリングする DOM ノード

• react-layer-stack - シンプルながら、ユビキタス力強く、アゴスティックなレイヤーシステム React.
• react-portal - React modals、lightboxes、ロードバーの輸送のためのコンポーネント…ドキュメント.body.

ユーザー行動をテストする

A/Bテスト、実験、…

• react-experiments - React 実装のためのコンポーネント UI 実験。

Code Design

Back to top ⬆️

助ける図書館 code デザイン

データストア

データフロー/データ管理/データストア/コンポーネントの状態/データフロー

• baobab-react - React Baobabの統合。
• cerebral - 独自のデバッガを持つステートコントローラー。
• effector-react - React 効果的なマルチストア・ステート・マネージャーのためのバインディング。
• fireproof - demo - docs 純粋なJS、ゼロ依存性、CRDTデータベース - ブラウザで実行し、任意のクラウドまたはバックエンドに接続します
• RxDB - demo - docs ファースト、ローカル、リアクティブデータベース JavaScript アプリケーション
• fluxible - ユニバーサルフラックスアプリケーション用のプラグイン可能なコンテナ。
• kea - 高いレベルのアーキテクチャ React アプリ。
• react-i13n - 実行者、スケーラブルでプラグイン可能なアプローチで、 React アプリケーション。
• react-redux - 公式HP React 結合のための Redux.
• redux-batched-actions - 単一の加入者通知の下でアクションを減らすために、減速+アクション。
• redux - 予測可能な状態コンテナ JavaScript アプリ。
• reselect - セレクターライブラリ Redux.
• resourcerer - REST API のデータ取得フレームワークの決定
• synergies - docs 再利用可能な作成のための実行者と分散コンテキストステートライブラリ React 原子のコンテキストピースを合成することにより、状態ロジック。
• zustand - docs - 単純化されたフラックスの原則およびボイラープレートなしのホックAPIを使用して速い熊骨の州管理の解決。
• teaful - 小さく、簡単で、強力 React 状態管理

フォームロジック

• data-driven-forms - すべての機能でフォームを構築するための宣言的な方法。
• formik - フォームを破損せずに作成し、検証を容易にサポートします。
• formsy-react - フォーム入力ビルダーとバリデータ React JSについて
• Phormal - Docs & Demos - レスポンシブ、組み込みの検証、ダークモードのサポート、右から左の言語の多言語フォーム。
• react-hook-form - React 手間をかけずにフォーム検証のためのホック。
• react-jsonschema-form - ツイート React JSONSchema から Web フォームを作成するコンポーネント。
• react-client-validation - シンプルで超軽量な検証 React.
• react-final-form - サブスクリプションベースのフォーム状態管理
• react-formawesome - 素晴らしいフォームを作成するための複雑なライブラリ。
• surveyjs - 高度な調査とフォームライブラリ
• Formily - 高性能、拡張可能および Typescript よくある質問
• hook-form-react - docs - 軽量、依存性のないソリューション React フォーム検証のためのホック。

ルーター

• react-router-component - 決定的なルータコンポーネント React.
• react-router-scroll - React ルーターのスクロール管理。
• react-router - 完全なルーティングライブラリ React.
• redux-first-history - Redux 最初の歴史 - Redux 歴史の結合サポート react-router - @reach/router - ウーター
• universal-router - isomorphicのシンプルなミドルウェアスタイルのルータ JavaScript ウェブアプリ
• wouter - 最小限に優しい〜1.3KBルーティングライブラリ。 他にはないが、ホック。
• tanstack-router - 内蔵キャッシュとタイプセーフルータ URL 状態管理

サーバからのプロップ

Component プロパティをネットワーク上で非同期的に取得

• react-refetch - シンプルで宣言的、そしてデータの取得可能な方法 React コンポーネント。
• redux-connect - 非同期プロップを解決するためのデコレータを提供 react-ルーター。
• axios-react - HTTP クライアントコンポーネント React.

サーバとのコミュニケーション

• apollo-client - 任意の GraphQL サーバーおよび UI フレームワーク。
• react-relay - リレーは JavaScript データドリブンの構築フレームワーク React アプリケーション。
• query - docs 強力な非同期状態管理、TS/JS のサーバー状態ユーティリティとデータ取得、 React、固体、スヴェルトおよび Vue.

CSS / スタイル

• aesthetic - 強力なタイプ安全、フレームワークの非浸透、 CSS-in-JS コンポーネントをスタイリングするためのライブラリ、オブジェクトをプレーンするか、スタイルシートをインポートするか、または外部クラス名を参照するだけです。
• aphrodite - it’s インライン スタイル, しかし、彼らは動作します!.
• inline-style-prefixer - インラインスタイルオブジェクトの実行時間オートプレフィクサ。
• @classmatejs/react - クラス名は、スタイルされたコンポーネントや、cva の variant の砂糖などの構文を持つコンポーネントビルダーを集中しました。
• react-container-query - モジュラー応答コンポーネント。
• react-responsive - 媒体の問い合わせ react 応答性のため design.
• reactponsive - 応答性の部品およびホック。
• styled-components - コンポーネントの年齢に応じた視覚的プリミティブ。
• stitches - CSS-in-JS は、ほぼゼロランタイム、SSR、多変量サポートを備えた。

HTML テンプレート

• jsx-control-statements - Neater もし と のために React JSXの特長

Isomorphic アプリ

• hypernova - サーバ側のレンダリングのためのサービス JavaScript ビュー。
• isomorphic-style-loader - イソモルフィック CSS Webpack 用のスタイルローダー。
• react-server - React 速いページの読み込みをブレイズするためのサーバーレンダー付きのフレームワーク。
• rill - ユニバーサルWebアプリケーションフレームワーク。
• webpack-isomorphic-tools - Webpack 組み込みアプリケーション用のサーバー側レンダリング(例: React).

ボイラープレート

足場/始動機のキット/Yeomanの発電機/積み重ねのensemble/種

• create-react-app - 作成する React ビルド構成のないアプリ。
• crisp-react - エクスプレス統合 TypeScript 複数の鉱泉および下落回避のためのサポートを使って。
• cra-template-redux-auth-starter - ツイート Redux CRAのためのauthの始動機のボイラー版。
• electron-react-boilerplate - デスクトップアプリでのライブ編集開発
• elegant - docs - demo - シンプル React 美しく表現的なWebアプリケーションを迅速に構築するためのフレームワーク Next.js, Tailwind CSSと Markdown ローディング。
• extensive-react-boilerplate - ボイラープレートと Next.js, Auth (サインイン, サインアップ, パスワードを再設定, 確認メール, トークンをリフレッシュ), Material UI, React ホックの形態, I18N、ファイルアップロード(ローカルおよびアマゾンS3の運転者を支えて下さい)、テスト、CI。
• generator-starhackit - フルスタックスターターキット。
• nwb - CLI ツールと devDependency for React app &コンポーネントとnpmモジュール。
• nx - 次世代ビルドシステム、ファーストクラスのモノレポサポートと強力な統合。
• PBandJ - Zero-Config 再利用可能なコンポーネントフレームワーク。
• react-hot-boilerplate - あなたの次ののための最小限のライブ編集ボイラープレート ReactJS プロジェクト
• rockpack - 作成のための簡単なソリューション React SSR、bundling、ライニング、5分以内のテストとアプリケーション。
• create-react-dependency - 作成する react ビルド構成なしの依存関係。
• phoenix - シンプルなボイラプレートで、あなたを助けます react サーバサイドレンダリングとローカリゼーションのサポート
• react-enterprise-starter-kit - 非常にスケーラブルでパフォーマンな素晴らしい React 非常に容易な維持できるコードベースが付いている企業の適用のための始動機のキット。
• Tailwindadmin - 自由な Shadcn のダッシュボードのテンプレートは造りました React そして、 Tailwind CSS 複数のフレームワークのサポートが付属しています

ツイート

• react-inlinesvg - SVG ローダコンポーネント ReactJS.
• react-godfather - 機能的なコンポーネントを、ホックなしで書き込む新しい方法。
• react-vvm - MVVM の新しいアプローチ React、心配のきれいな分離を強制するために、スケーラブルのためのボイラー版および自動再レンダリングの最適化を減らして下さい UI ロジック。
• react-call - お問い合わせ React コンポーネント。
• redux-auth-patch - 完全なトークン認証システム react + redux isomorphic レンダリングをサポートする。
• redux-search - Redux クライアント側の検索のためのバインディング。
• tcomb-react - PropTypes の代替構文。
• react-universal-hooks - :tada: サポート react どこでもホック(機能かクラスの部品)。

ユーティリティ

Back to top ⬆️

• qrcode.react - A <QRCode/> 使用するコンポーネント React.
• <qr-code> – A no-dependencies, customizable, animate-able, SVG-based <qr-code> element.
• react-children-utilities - 延長utilsのための React.お子様
• react-media - ツイート CSS メディアクエリコンポーネント React.
• react-middle-ellipsis - demo - 端の代わりに中間に長い文字列をトランクします。
• react-translate-component - 多言語/ローカライズされたテキストコンテンツ。

i18n

国際化/L10n/ローカリゼーション/翻訳

• react-i18next - 国際化のための react 正しい。 i18next の使用 i18n エコシステム。
• react-intl - 国際化 React アプリ。
• react-localized - 国際化のための React コンポーネントに基づく gettext フォーマット。
• react-translate-maker - ユニバーサル国際化(Universal internationalization)i18n) オープンソースライブラリ React.
• react-intl-universal - demo 国際化 React アプリ。 だけでなく、 React.Component は、Vanilla JS にも使えます。
• @tolgee/react - docs - Webベースのローカリゼーションツールにより、ユーザーは直接翻訳できます。 React 開発アプリ
• js-lingui - docs - 読みやすく、自動化され、最適化された(5 kb)の国際化 JavaScript.

フレームワーク結合/統合

• backbone-react-component - バックボーンモデルを自動的に差し込むニフティ接着剤のビット。
• elm-react-component - ツイート React Elm モジュールをラップするコンポーネント React アプリケーション。
• gl-react - OpenGL / WebGLのバインディング React 画像やコンテンツに対する複雑な効果を実装します。
• react-backbone - バックボーン・アウェア・ミキサー react たくさんあります。
• react-d3-library - D3 を使用したオープンソースライブラリ React.
• react-elm-components - ログイン React エルムのコンポーネント。
• react-famous - React Famo.usへの橋。
• react-localstorage - Facebook’s のためのシンプルなコンポーネント化された localstorage 実装 React.
• react-lottie-player - demo - 決定的な宝くじアニメーションプレーヤー。
• react-on-rails - インテグレーション React + ユニバーサル(Isomorphic)アプリを構築するためのWebpack + Rails。
• react-three-renderer - 3.jsキャンバスにレンダー React.
• react-threejs - 最小結合間 React ・3.js
• reactfire - ReactJS 簡単にFirebaseの統合のためのmixin。
• reactive-elements - 使用を許可します React.js コンポーネントとして HTML 要素(webコンポーネント)。
• react-unity-webgl - ビルトインイベントシステムを用いた双方向通信によるUnityのインターグレーション

第三者サービスとの連携

• react-ga - React Google Analytics モジュール。
• react-google-analytics - Googleの分析コンポーネント。
• react-google-autocomplete - Google は API コンポーネントとホックを配置します。
• react-recaptcha - ツイート react.js Google用のreCAPTCHA。
• react-stripe-checkout - stripe’s checkout.js を a としてロードする react コンポーネント。 チェックアウトを使用する最も簡単な方法 React.
• redux-segment - Segment.io アナリティクスの統合 redux.
• react-slack-notification - メッセージとエラーログをSlackチャンネルに直接送信します。
• react-firebase-hooks - アプリケーション内の firebase を統合するホック。

パフォーマンス

Back to top ⬆️

UI

• inferno - 非常に速く、 React-いいね JavaScript 現代的なユーザー インターフェイスを造るためのライブラリ。
• react-fastclick - 速い接触でき事のためのでき事 React.
• react-static-container - 静的コンテンツを効率的にレンダリングします。

トピックス

• react-perf-tool - あなたの破壊的なパフォーマンス React アプリケーション。
• react-render-visualizer - レンダリングの視覚化装置のための ReactJS.

レイジー負荷

• react-infinite-grid - ツイート React 要素のグリッドをレンダリングするコンポーネント。
• react-infinite - UITableViewに基づくブラウザ対応の効率的なスクロールコンテナ。
• react-lazy-load - React ビューポートを入力すると、子要素をレンダーするコンポーネント。
• react-lazyload - コンポーネント、イメージ、またはパフォーマンスの重要事項をレイジーロードします。
• react-virtualized - React 大規模なリストと表形式のデータを効率的にレンダリングするためのコンポーネント。

アプリサイズ

• babel-plugin-transform-react-remove-prop-types - 不要な削除 React propTypes。
• react-lite - 導入事例 React 小さなスクリプトサイズを最適化します。

サーバサイドレンダリング

• iSSR - あなたの移動する最も簡単な方法 React Server-Sideレンダリングへのアプリケーション。 副作用を扱い、状態を同期させます。
• react-esi - SSRのパフォーマンスを高めるライブラリ React Edge Side Includes (ESI) フラグメントとしてコンポーネント

Dev ツール

Back to top ⬆️

テスト

• enzyme - JavaScript ユーティリティのテスト React.
• jest-cli - 痛みのない JavaScript テスト。
• react-unit - 軽量ユニットテストライブラリ ReactJS.
• redux-test-recorder - ツイート redux 減力剤を自動生成するミドルウェア ui インタラクション。
• rut - React 容易になされるテスト react-test-renderer. サポート DOM そして注文のレンダリング。
• unexpected-react - 予期しないプラグインでテストを完全に有効化 React 仮想 DOMおよびまた浅いレンダリング者。
• playwright enables reliable end-to-end testing for modern web apps.

Redux

• redux-devtools-chart-monitor - チャートモニター Redux DevTools。
• redux-devtools-dock-monitor - 再構成可能で移動可能なドック Redux DevToolsは監視します。
• redux-devtools-filterable-log-monitor - フィルター可能なツリービューモニター Redux DevTools。
• redux-devtools-inspector - その他 Redux DevToolsモニター。
• redux-devtools-log-monitor - デフォルトのモニター Redux ツリービューのDevTools。
• redux-devtools - DevTools について Redux ホットリロード、アクションリプレイ、カスタマイズ可能 UI.
• remote-redux-devtools - Redux DevToolsリモートで。

トピックス

• fluxguard - PRODは、すべてを強調表示する監視を変更します DOM + design 変更。
• react-inspector - ブラウザのDevToolsのインスペクターの電源は、右あなたの内側に React アプリ。
• reactotron - あなたの検査のためのCLIとOS Xアプリ React JSとJS React Native アプリ。
• Tail Lens - Tailwind ブラウザのエディタ : 視点, 編集, プレビュー, コピー.

ツイート

• component-controls - demo - docs - 超高速ドキュメントサイトを作成する次世代ツール。
• cosmos-js - 本当にカプセル化された設計のためのDX用具 React コンポーネント。
• react-demo-tab-cli - デモを作成するためのCLIツール react コンポーネント。
• react-styleguidist - React 様式ガイドの発電機。
• standard-react - JavaScript 標準的な様式ガイド。
• Plasmic - パワフル design あなたの構築のためのツール React コンポーネントを視覚的に。
• SimpleLocalize - オープンソースを見つけるためのCLIツール i18n キーの React プロジェクト。
• react-device-frameset - React デバイスフレームセットコンポーネント。

ツイート

Back to top ⬆️

• DataFormsJS JSX Loader - スモール JavaScript JSXからJSをWebページに直接変換するためのコンパイル。
• html-to-react-components - 注釈部分の抽出 HTML お問い合わせ React 別々のモジュールとしてコンポーネント。
• htmltojsx - 自動的に AJAXify プレーン HTML 力のと React. It’s 魔法!.
• jsonx - React JSON シンタックス
• mozaik - Mozaïk は nodejs に基づくツールです。 react / d3 / 美しいダッシュボードを簡単に作成するスタイラス。
• react-blessed - ツイート react 祝福のためのレンダー。
• jsondiffpatch-react - JSON の拡散。
• iron-session - セキュアでステートレスで、Cookieベースのセッションライブラリ。

静的なウェブサイトの発電機

• gatsby - プレーンテキストを動的ブログやウェブサイトに変える React.js.

クラウドソリューション

Back to top ⬆️

データベース

• BCMS - Gatsby、Nuxt、Next用のAPIベース、オープンソース、セルフホスト可能なコンテンツ管理システム。
• crisp-bigquery - フルスタック Google BigQuery と Express で TypeScript.
• react-server-routing-example - AWS DynamoDB を使用した、ユニバーサルクライアント/サーバーのルーティングとデータ。