React.js UI「sonwan-ui」を使用する

作成日 2021.01.17
React
React.js

UI「sonwan-ui」をインストールしてデザインを適応するまでの手順となります。ここでは、react.jsでsonwan-uiを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. react.js環境構築
3. sonwan-uiインストール
4. sonwan-ui使い方

環境

OS CentOS Stream release 8
node V12.16.3
npm 6.14.7
React 16.13.0

react.js環境構築

下記のコマンドで構築してます。ここでは、react-appという名前でプロジェクトを作成してます。

create-react-app react-app

sonwan-uiインストール

作成したプロジェクトに移動して、インストールします。

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install sonwan-ui

sonwan-ui使い方

srcディレクトリにsample.jsと名前で下記のコードを記述します。

import React from "react";
import SonWan from "sonwan-ui";
import "sonwan-ui/build/style.min.css";

const { Input, Switch, Card, CardItem, ListItem } = SonWan;

const Sample = () => {

    const [isDark, setIsDark] = React.useState(false);
    return (
        <div>
            <div className={`${isDark ? "dark" : ""} h-screen`}>
                <div className="h-screen bg-light-100 dark:bg-dark-900 flex flex-col justify-center items-center">
                    <div style={{ width: 380, maxWidth: "100%" }} className="p-8">
                        <h1 className="text-black dark:text-white mb-4 font-bold text-center">
                            Hello CodeSandbox
                        </h1>

                        <Input placeholder="Search In Codesandbox" />
                        <Card>
                            <CardItem
                                title="Yuzuha Usagi"
                                subtitle="0821 - 7654 - 3210"
                                avatar={
                                    <div className="w-10 h-10 overflow-hidden flex justify-center items-center rounded-full">
                                        <img
                                            alt="profile"
                                            src="https://asianwiki.com/images/2/2d/Tao_Tsuchiya-p03.jpg"
                                        />
                                    </div>
                                }
                            />
                        </Card>
                        <ListItem
                            title="Dark Mode"
                            action={
                                <Switch
                                    name="darkmode"
                                    onChange={(value) => {
                                        setIsDark(value);
                                    }}
                                />
                            }
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Sample;

次に、srcディレクトリ配下にあるApp.jsを下記のように編集します。

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
  const style = {
    width: "50%",
    margin: "0 auto",
    marginTop: 150,
  };
  return (
    <div className="App">
      <div style={style}>
        <Sample />
      </div>
    </div>
  );
}

export default App;

実行します。