Reactのコンポーネントライブラリを作ってnpmに公開したお話

Reactのコンポーネントライブラリを作ってnpmに公開したお話

前回の記事「PostCSSでレスポンシブに対応したCSSフレームワークを作ってみました」でご紹介したCSSフレームワーク「Nimbus」を使ってReactのコンポーネントライブラリを作ってみました。基本的な見た目は「Nimbus」を全く同じです。Reactのコンポーネントライブラリ「Nimbus-React」のご紹介をさせていただければと思います。

Ads

使い方

インストール

npm install nimbus-react

import のサンプル

index.js

import 'nimbus-react/public/css/app.css'

component/Content.js

import {Button} from 'nimbus-react'

export default class App extends React.Component {
    render() {
        return (
            // ボタンを追加する
            <Button onClickAction={() => {console.log('hgoehgoe')}} color={false} size={false}>Button</Button>
        );
    }
}

対応ブラウザ

  • Chrome最新
  • FireFox最新
  • Safari最新
  • IE11以上

2017年4月11日をもって、IE9のサポート終了が終了します。(2017/4/6執筆時点)ということでFloatでのレイアウトなどは無くし、基本的にFlexboxを使ったレイアウトができるようにしています。

State管理について

プロジェクトに合わせて柔軟に対応できるようにしたかったので、Nimbus-reactライブラリではStateの管理を行なっていません。プロジェクト内でReactなりReduxなりでそれぞれStateの管理する方針です。nimbus-react/docs内のTabとModalの作りを参考にしていただくといいと思います。

Nimbus-jqueryとの相違点

  • Fixed-Content廃止
  • Page-Linkの廃止

NimbusではあったJavaScriptの機能だったんですが、Nimbus-reactでは廃止にしました。理由としては、Stateの管理をプロジェクトに依存しているので、Viewでの記述がどうしても増えてしまいそうだったので廃止にしました。そもそもSPAにはあまりいらない機能かなと。

これからの改善点

  • プロジェクトによってテーマカラーなどを変えられるようにしたい
  • FormのError周りがあまりいけてない

プロジェクトによってテーマカラーなどを変えられるようにしたい

これは今後絶対にやりたいですね。今のままだとNimbusのテーマに勝手になってしまうので、何か方法を考えなければいけません。
あらかじめテーマをいくつかこちらで用意するのか、デフォルトの装飾は限界まで無くしてプロジェクトごとに上書きをするのか、方針を決めて近々リリースします。

FormのError周りがあまりいけてない

これもなんかいけてないんですよねー

errorを受け取るようになっているんですが、どうも僕がやっていたプロジェクトのフォーマットに近いものになってしまっていて、実際これが汎用性あるのか?
と思っています。

いいなと思ったらシェアお願いします

Ads
ページの先頭へ