インストール

PrimeReactは、React向けの豊富なオープンソースUIコンポーネントセットです。

ダウンロード#

PrimeReactは、npmからダウンロードできます。


// with npm
npm install primereact

// with yarn
yarn add primereact

コンテキスト#

設定は、primereact/apiからインポートされたPrimeReactProviderとPrimeReactContextによって管理されます。


import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';

PrimeReactProviderコンポーネントはアプリケーションをラップするために使用され、PrimeReactContextは設定オプションにアクセスするために使用されます。


// _app.js
import { PrimeReactProvider } from 'primereact/api';

export default function MyApp({ Component, pageProps }) {
    return (
        <PrimeReactProvider>
            <Component {...pageProps} />
        </PrimeReactProvider>
    );
}

使用方法#

各コンポーネントは個別にインポートできるため、使用するものだけをバンドルできます。インポートパスは、対応するコンポーネントのドキュメントに記載されています。


import { Button } from 'primereact/button';

テーマ設定#

PrimeReactには、スタイル付きとスタイルなしの2つのテーマモードがあります。

スタイル付きモード#

スタイル付きモードは、Material、Bootstrap、PrimeOneテーマなどの独自のテーマを持つ、事前にスキンが適用されたコンポーネントに基づいています。テーマはインポートする必要があるCSSファイルです。テーマセクションにアクセスして、利用可能なテーマの完全なリストから選択してください。


import "primereact/resources/themes/lara-light-cyan/theme.css";

スタイルなしモード#

スタイルなしモードは、デフォルトですべてのコンポーネントで無効になっています。インストール中にPrimeReactContextを使用して、unstyledをtrueに設定してグローバルに有効にします。詳細と例については、スタイルなしモードのドキュメントをご覧ください。


import { PrimeReactProvider } from "primereact/api";
...
return(
    <PrimeReactProvider value={{ unstyled: true }}>
        <App />
    </PrimeReactProvider>
)

例#

Reactエコシステムで人気のあるオプションのさまざまなサンプルを作成しました。

ビデオ#

ステップバイステップで説明するビデオチュートリアル。

Next.js#

PrimeReactはSSRをファーストクラスでサポートしており、 Next.JSを使用しています。実際、このWebサイトもNext.jsで構築されています。