react-extras : react.jsでrenderメソッド内のタグが少し楽に書けるライブラリ



react.js でrednerメソッド内のコンポーネントが少し楽に書けるようになる utilityライブラリ「react-extras」の紹介です。


react-extras で出来ること 

- render メソッド内で 条件判定用の " If ", ループ用の" For "などの処理をコンポーネントを使って書けるようになります

render() {
 return (
  {/* If コンポーネント  */}
  <If condition={this.state.flag == true}>
    <p> 何か表示 </p>
  </If>

 {/* For コンポーネント  */}
 <ul>
     <For
       of={[1, 2, 3, 4, 5]}
       render={(item, index) => {
         return <li key={index}> {item} </li>
       }}
          />
  </ul>
 );
}


react-extras のインストール

react-extras は プロジェクトルート上から ' yarn ' 又は ' npm ' を使ってインストールします。

# npm
npm i react-extras
# yarn
yarn add react-extras


react-extras 本体の読み込み

 react-extraは ブラケット内で、使いたいコンポーネントを指定してライブラリを呼び出します。また、react.js 用のライブラリなので、' react.js ', ' react-dom ' が必要になります

* 執筆時点のバージョン ' 0.5 ' では5つのコンポーネント ( If, Choose, For, RootClass, BodyClass )が用意されています

import React from "react";
import { コンポーネント名 } from "react-extras";
// import { If, For } from "react-extras";


If 

 ' If ' はその名の通り、条件が ' true' の場合にのみ表示させるコンポーネントです。 props ' conditions ' 内に判定する式を記述して使います。

import { If } from "react-extras";

//...
render() {
 const flag = true;

 return(
 {/* Ifコンポーネント */}
  <If condition={ flag == true }>
     <div> flagが 'true' の場合にのみ表示されます </div>;
  </If>
 )
} // !render()

 

Choose 

' Choose ' は Switch文と同等の動きをします。' Choose.When ' コンポーネント内の、props  ' conditions 'に判定する式を記述します。

 また、条件がどれとも合わなかった時の処理は ' Choose.Otherwise ' コンポーネントのエレメントが表示されます。

import { Choose } from "react-extras";

//...
render() {
 const flag = 1;

 return(
 <div>
 {/* Choose コンポーネント */}
  <Choose>
    <Choose.When condition={flag == 1}>
     <h1> flagの値が1の時に表示 </h1>
    </Choose.When>

    <Choose.When condition={flag == 2}>
     <h1> flagの値が2の時に表示 </h1>
    </Choose.When>
    
    <Choose.Otherwise>
     <h1> flagの値が1又は2以外の時に表示 </h1>
    </Choose.Otherwise>
  </Choose>
 </div>
 )
} // ! render()


For 

 For は要素をループしたい時に使うリストコンポーネントです。' of ' props内 にはリスト化させる値、' render ' props内にはコールバックが記述できます

React で要素を繰り返したい時は一般的に ' map '  メソッドを使いますが、For コンポーネントを使うと、わかりやすくループを回す処理が記述できそうです。

import { For } from "react-extras";

//...
render() {
 const flag = [1, 2, 3, 4, 5];

 return(
 <div>
 {/* For コンポーネント */}
  <ul>
     <For
        of={flag}
        render={(item, index) => {
              return <li key={index}> {item} </li>
            }}
      />
  </ul>
 </div>
 )
} // !render()


RootClass , BodyClass 

RootClass, BodyClass は、共に クラスを追加・削除するコンポーネントです。' add ' props を指定すると追加、' remove ' propsを指定すると削除されます。

* RootClassは ' html ' タグ内、 ' BodyClass ' は ' body 'タグ内に適応されます

import { RootClass, BodyClass } from "react-extras";

//...
render() {

 return(
 <div>
 {/* RootClass コンポーネント */}

  {/* add props */}
  <RootClass add="dark-mode" />
 {/* remove prop  */}
  <RootClass remove="dark-mode" />

  {/* BodyClass コンポーネント */}

  {/* add props */}
   <BodyClass add="dark-mode" />
  {/* remove prop  */} 
  <BodyClass remove="dark-mode" />
 </div>
 )
} // !render()


Summary

 以上が react-extrasの紹介でした。特に " If " や " For " コンポーネントは役立つ場面が多そうなので、気になった人はゼヒ×2 チェックしてみてください!

GitHub : sindresorhus/react-extras

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ