パススループロパティは、コンポーネントの内部DOM構造にアクセスするためのAPIです。
各コンポーネントには、利用可能なDOM要素に対応するキーを持つオブジェクトを定義するための特別なptプロパティがあります。各値もオブジェクトであり、スタイリング、aria、data-*、カスタム属性など、要素に適用する任意のプロパティを定義します。すべてのコンポーネントドキュメントには、PTを介して公開される利用可能なセクション名を文書化するための専用セクションがあります。
ptの最も一般的な用途は、スタイリングとカスタマイズです。classNameおよびstyleプロパティは、対応するclassNamesのようなオブジェクトおよび条件の正確な構文をサポートします。以下の例では、PrimeFlex CSSライブラリでPanelコンポーネントをスタイル設定します。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<Panel
header="Header"
toggleable
pt={{
header: ({ state }) => ({
id: 'myPanelHeader',
style: {
'user-select': 'none'
},
className: classNames('border-primary', {
'bg-primary': state.collapsed,
'bg-primary-reverse': !state.collapsed
})
}),
content: { className: 'border-primary text-lg text-primary-700' },
title: 'text-xl', // OR { className: 'text-xl' }
toggler: 'bg-primary hover:bg-primary-reverse' // OR { className: 'bg-primary hover:bg-primary-reverse' }
}}
>
<p className="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
コンポーネントのライフサイクルフックは、コールバック関数を登録できるように、hooksプロパティを使用してパススルーとして公開されます。利用可能なコールバックは、useMountEffect、useUpdateEffect、useUnmountEffectです。ライフサイクルフックの詳細については、React.jsのドキュメントを参照してください。
<Panel header="Header" pt={panelPT}>
Content
</Panel>
コンポーネントタイプごとに共有パススループロパティを定義します。たとえば、以下の構成では、すべてのパネルヘッダーにbg-primaryスタイルクラスがあり、すべてのオートコンプリートコンポーネントに固定幅があります。これらの設定は、特定のコンポーネントで上書きできます。コンポーネントのptプロパティは、グローバルのptよりも優先度が高いためです。
// _app.js
import { PrimeReactProvider } from "primereact/api";
export default function GlobalPTDemo() {
const pt = {
panel: {
header: { className: 'bg-primary' }
},
autocomplete: {
input: { root: { className: 'w-16rem' } }
}
};
return(
<PrimeReactProvider value={{ pt }}>
<App />
</PrimeReactProvider>
)
}
globalプロパティには、グローバルpt構成に属するカスタムCSSを定義するためのcssオプションがあります。この機能の一般的なユースケースは、パススループロパティ構成に関連するグローバルスタイルとアニメーションを定義することです。
// _app.js
import { PrimeReactProvider } from "primereact/api";
export default function CustomCSSDemo() {
const pt = {
global: {
css: `
button {
padding: 2rem;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
`
}
};
return(
<PrimeReactProvider value={{ pt }}>
<App />
</PrimeReactProvider>
)
}
既存のパススルー構成は、usePassThroughユーティリティでカスタマイズされます。最初のパラメータはカスタマイズするオブジェクト、2番目のパラメータはカスタマイズ、最後のパラメータはマージの動作です。ユースケースの1つは、Tailwindのような既存のスタイルなしのテーマをカスタマイズすることです。
import React from 'react';
import { PrimeReactProvider } from "primereact/api";
import { usePassThrough } from "primereact/passthrough";
import Tailwind from "primereact/passthrough/tailwind";
export default function UsePassThroughDemo() {
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
title: {
className: 'leading-none font-light text-2xl'
}
}
},
{
mergeSections: true,
mergeProps: false
}
);
return(
<PrimeReactProvider value={{ unstyled: true, pt: CustomTailwind }}>
<App />
</PrimeReactProvider>
)
}
mergeSectionsはメイン構成からのセクションを追加するかどうかを定義し、mergePropsは定義されたプロパティを上書きするかマージするかを制御します。デフォルトは、mergeSectionsがtrue、mergePropsがfalseです。
Tailwindなどの一部のCSSライブラリでは、クラス名を競合しない方法でマージする必要があります。それらをサポートするために、クラス名をマージする方法を手動で定義するために、classNameMergeFunctionをptOptionsオブジェクトの一部として渡すことができます。
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: false }
);
// Output:
// panel.header.className => 'my_panel_header'
// panel.title.className => Tailwind.panel.title.className
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: true }
);
// Output:
// panel.header.className => classNames(Tailwind.panel.header.className, 'my_panel_header')
// panel.title.className => Tailwind.panel.title.className
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: true }
);
// Output:
// panel.header.className => classNames(Tailwind.panel.header.className, 'my_panel_header')
// panel.title.className => undefined
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: false }
);
// Output:
// panel.header.className => 'my_panel_header'
// panel.title.className => undefined