【React】値を操作するコントローラーパッケージ（LEVA）

概要

ReactでWebアプリケーションを作成していると、値を操作するコントローラーが欲しくなるときがあります。
ちょっと動作を確認したいときに、LEVAを使用すると簡単にコントローラーが実装できます。

LEVAについては、先日記事でまとめました。

しかし、LEVAの公式ドキュメントをよくよく見ると、テキスト化されていないインターフェイスが多くあることがわかったので、改めてまとめました。

軽く触ってみたい方はこちら

ドキュメント

• 公式ドキュメント

• 機能一覧

※ ただし、バージョンによる仕様変更や、TypeScriptの型システムでうまく使えない機能もありました。

現状で実装できたインターフェイス

インターフェイス

コード

以下を参照してください。

色

指定できる色は以下になります。

type	e.g.
Name	red（一覧）
Hex	#9442ff
Hex8	#8b33ffab
RgbString	rgb(255, 47, 162)
RgbaString	rgba(233, 30, 99, 0.9)
Rgb	{r: 0, g: 150, b: 136}
Rgba	{r: 0, g: 150, b: 136, a: 0.5}
Hsl	{h: 4, s: 1, l: 1}
Hsla	{h: 36, s: 1, l: 1, a: 1}
HslString	hsl(199, 98%, 48%)
HslaString	hsla(187, 1%, 42%, 0.9)
Hsv	{h: 238, s: 1, v: 1}
Hsva	{h: 58, s: 1, v: 1, a: 0.3}

フォルダ追加の注意点

フォルダによってプロパティをまとめることができますが、プロパティはフォルダの影響を受けません。

例えば、以下のようにフォルダを作成した場合、

.tsx

const [datas, set] = useControls(() => ({
	check: true,
	folder: folder({
		check: true,
	})
}))

datasではcheckプロパティが重複するため、folderは無効になります。

.tsx

datas = {
	check: true,
	check: true,
}

別名にすれば問題なく表示されます。

.tsx

const [datas, set] = useControls(() => ({
	check: true,
	folder: folder({
		check2: true,
	})
}))

この動作は、ドキュメントに記載されています。

set 関数

コード例では使用していませんが、set関数を使用することでコントローラーの値を外部から変更することができます。

.tsx

const [datas, set] = useControls(() => ({
	// ・・・
}))

例えば、コンポーネントをドラッグ操作してその位置を同期させる場合に使えます。

コントローラーの外観の変更

できることは少ないですが、コントローラーの外観を変更することもできます。
変更する場合、明示的にコンポーネントを追加して、プロパティを設定する必要があります。

.tsx

return (
	<div className={styles.container}>
		<Leva flat titleBar={false} theme={{ fontSizes: { root: '0.8rem' } }} />
		<pre className={styles.textContainer}>{JSON.stringify(datas, null, 4)}</pre>
	</div>
)

ButtonGroup

ButtonGroupを使用すると、TypeScript上のエラーになりうまく実装できませんでした。
解決方法がわかる方は是非コメントで教えてください。

参考