ReactFelaを使用したコンポーネントのスタイリング

Reactのスタイリングには、さまざまな形とサイズがあります。箱から出して、classNameプロパティを介してクラスを割り当てるか、styleプロパティにオブジェクトを渡すことによってCSSプロパティを割り当てることができます。ほとんどのシナリオで十分ですが、欠点がないわけではありません。 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を使用する必要があります。 createRendererメソッドは、Felaを利用しているコンポーネントをラップアウトするProviderコンポーネントが渡されるレンダラーを作成するために使用されます。

以下のすべての例には、魔法を実現するために必要な定型コードが含まれています。

生成されたCSSクラスの使用

最も複雑でないFelaの例は理想的ではありませんが、ボイラープレートコードの量が最も少なくなっています。

Felaの仕組みは、スタイルを取得し、アトミッククラスを使用して適切なCSSを生成し、任意のコンポーネントのclassNamesプロパティに渡すことができるCSSクラスを取得できるようにすることです。

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とクラス名を生成するために使用されます。

ruleは、渡された可能性のあるプロパティを含むすべてのプロパティを持つオブジェクトを返す単純な無名関数です。

ruleは単なる戻りオブジェクトを持つ関数であるため、期待されるオブジェクトをすぐに返す代わりに、適切と思われる追加のロジックを拡張して含めることができます。

コンポーネントプリミティブの使用

前のアプローチは十分に機能しますが、プロジェクト全体で簡単に再利用できる新しいコンポーネントを作成すると便利な場合があります。

これらのシナリオでは、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にアクセスしてください。

楽しみ！