ReactFelaを使用したコンポーネントのスタイリング
Reactのスタイリングには、さまざまな形とサイズがあります。 箱から出して、を介してクラスを割り当てることができます className
プロパティまたはオブジェクトをに渡すことによってCSSプロパティを割り当てる style
財産。 ほとんどのシナリオで十分ですが、欠点がないわけではありません。 作る classNames
動的には、追加のクラスを定義する必要があり、 styles
、動的プロパティを許可する一方で、ボイラープレートコードが必要であり、次のような疑似クラスプロパティを深く掘り下げることはできません。 :hover
. それは、フェラがあなたの救助に来ることができる場所です!
Fela は、JavaScriptで状態駆動型のスタイル設定を処理するためのフレームワークに依存しないライブラリです。 パフォーマンスが高く、使用方法に関してある程度の柔軟性があります。 Felaを単独で使用することもできますが、 react-fela を使用して、React.jsアプリにReactバインディングを提供できます。
入門
開始するには、追加する必要があります react-fela
私たちのプロジェクトへ:
npm経由
$ npm install --save react-fela
または糸経由
$ yarn add react-fela
この記事では、からのいくつかの方法を使用します fela
ライブラリを直接。 でも心配しないでください、 react-fela
この依存関係が含まれているので、うまくいくはずです。
レンダラー
約束通り、一部があります fela
使用する必要のあるライブラリ、それは createRenderer
. The createRenderer
メソッドは、渡されるレンダラーを作成するために使用されます Provider
Felaを活用しているコンポーネントをラップアウトするコンポーネント。
以下のすべての例には、魔法を実現するために必要な定型コードが含まれています。
生成されたCSSクラスの使用
最も複雑でないFelaの例は理想的ではありませんが、ボイラープレートコードの量が最も少なくなっています。
Felaの仕組みは、スタイルを取得し、アトミッククラスを使用して適切なCSSを生成し、任意のコンポーネントに渡すことができるCSSクラスを取得できるようにすることです。 classNames
財産:
import React from "react";
import { render } from "react-dom";
import { createRenderer } from "fela";
import { Provider } from "react-fela";
const renderer = createRenderer();
const rule = ({
backgroundColor = "#6db65b",
borderColor = "#efbb35",
padding
}) => ({
backgroundColor: backgroundColor,
border: `10px solid ${borderColor}`,
color: "#fff",
fontWeight: "bold",
padding: `${padding}px`,
":hover": {
cursor: "pointer",
filter: "drop-shadow(0 10px 19px rgba(0, 0, 0, 0.3))"
}
});
const container = document.createElement("div");
document.body.appendChild(container);
render(
<Provider renderer={renderer}>
<div className={renderer.renderRule(rule, { padding: 100 })}>
Hover Over Me!
</div>
</Provider>,
container
);
例でわかるように、 renderer
渡されるCSSプロパティのオブジェクトに基づいてCSSとクラス名を生成するために使用されます。
The rule
は、渡された可能性のあるプロパティを含むすべてのプロパティを持つオブジェクトを返す単純な無名関数です。
なぜなら rule
は単なるreturnオブジェクトを持つ関数であり、期待されるオブジェクトをすぐに返す代わりに、適切と思われる追加のロジックを拡張して含めることができます。
コンポーネントプリミティブの使用
前のアプローチは十分に機能しますが、プロジェクト全体で簡単に再利用できる新しいコンポーネントを作成すると便利な場合があります。
これらのシナリオでは、 FelaComponent
新しいコンポーネントを作成するためのプリミティブコンポーネント:
import React from "react";
import { render } from "react-dom";
import { createRenderer } from "fela";
import { FelaComponent, Provider } from "react-fela";
const renderer = createRenderer();
const rule = ({
backgroundColor = "#6db65b",
borderColor = "#efbb35",
padding
}) => ({
backgroundColor: backgroundColor,
border: `10px solid ${borderColor}`,
color: "#fff",
fontWeight: "bold",
padding: `${padding}px`,
":hover": {
cursor: "pointer",
filter: "drop-shadow(0 10px 19px rgba(0, 0, 0, 0.3))"
}
});
const PaddedContainer = ({
backgroundColor,
borderColor,
padding,
children
}) => (
<FelaComponent
rule={rule}
backgroundColor={backgroundColor}
borderColor={borderColor}
padding={padding}
>
{children}
</FelaComponent>
);
const container = document.createElement("div");
document.body.appendChild(container);
render(
<Provider renderer={renderer}>
<PaddedContainer padding={100}>
Hover Over Me!
</PaddedContainer>
</Provider>,
container
);
同様の利用 rule
、新しいものを作成することができます PaddedContainer
オーバーヘッドやクラスの割り当てなしでプロパティを直接渡すことができるコンポーネント renderRule
.
自分でコンポーネントを作成する
プリミティブを使用して新しいコンポーネントを作成することに問題はありませんが、コンポーネントを直接作成する場合よりも、ボイラープレートが少し多くなる傾向があります。
import React from "react";
import { render } from "react-dom";
import { createRenderer } from "fela";
import { createComponent, Provider } from "react-fela";
const renderer = createRenderer();
const rule = ({
backgroundColor,
borderColor,
padding
}) => ({
backgroundColor: backgroundColor,
border: `10px solid ${borderColor}`,
color: "#fff",
fontWeight: "bold",
padding: `${padding}px`,
":hover": {
cursor: "pointer",
filter: "drop-shadow(0 10px 19px rgba(0, 0, 0, 0.3))"
}
});
const AnotherPaddedContainer = createComponent(rule);
const container = document.createElement("div");
document.body.appendChild(container);
render(
<Provider renderer={renderer}>
<AnotherPaddedContainer padding={100}>Hover Over Me!</AnotherPaddedContainer>
</Provider>,
container
);
プリミティブコンポーネントを使用した例と同じように、少しクリーンで再利用可能です。
結論
どのアプローチを採用するかに関係なく、 react-fela
作成する必要のある定型文の量を排除することで、Reactでコンポーネントを動的にスタイル設定するために必要な時間を短縮できます。
上記のコードサンプルの動作を確認するには、CodeSandboxにアクセスしてください。
楽しみ!