react-well-platesを使ってみた

前回ちらっと紹介したReactコンポーネントライブラリreact-well-platesを使ってみました。公式のStorybookが参考になりました。

下準備

まず、create-react-appによるアプリの骨組み作成とnpmによるライブラリのインストールを行います。

npx create-react-app my-wellplate-app
cd my-wellplate-app
npm install react-well-plates

メインコードの作成

my-wellplate-app/src/App.jsの内容を編集し、以下のような内容で保存します。propsのrowsとcolumnsは必須項目のようです。

import logo from './logo.svg';
import './App.css';
import { WellPlate } from 'react-well-plates';

function App() {
  const props = {
    rows: 8,
    columns: 12
  };
  return (
    <WellPlate {...props} />
  );
}

export default App;

アプリの起動

以下のコマンドでアプリを起動します。自動でWebブラウザが立ち上がり基本的なwellplateの図が表示されます。

npm start

様々な設定

上記で示したWellPlateコンポーネントにはpropsを編集することで様々な設定ができます。

// 設定例
const props = {
    rows: 8, // N行のwellplateを表示 96なら8、384なら16といった感じ
    columns: 12, // M行のwellplateを表示 96なら12、384なら24といった感じ
    wellSize: 30, // 1wellのサイズデフォルトは多分40(px)
    wellStyle: () => ({
        fontSize: 'x-small',
    }),  // wellのstyle情報を返す関数を設定
    renderText: ({index, label}) => {
        return (
            <div>
                <div>{index}</div>
                <div>{label}</div>
            </div>
        );
    },  // wellの中に表示する内容を返す関数を設定
    displayAsGrid: true  // グリッド表示（格子状表示）
};

Well選択可能なwellplate

クリックによるwellの選択を可能にするためには<WllPlate />の代わりに<MultiWellPicker />を使います。また、ReactのuseState関数を使用します。

設定必須の項目として、valueとonChangeが増えます。

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import { MultiWellPicker } from 'react-well-plates';

function App() {
    const initialValue = [3, 4, 5];  // 最初に選択されているwellのインデックス
    const [value, setValue] = useState(initialValue);
    const props = {
        rows: 8,
        columns: 2,
        value: value,
        onChange: setValue,
        disabled: [0, 1, 2],  // 選択できないwellを指定できる(任意)
    };
    const selected_list = value.map((v) => <li>{v}</li>); // 選択したwellのインデックスをリスト表示するための処理
    return (
        <div>
            <MultiWellPicker {...props} />
            <ul>{selected_list}</ul>
        </div>
    );
}

export default App;