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

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

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

https://qiita.com/nemutas/items/fd834d92602e2218f35d

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

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

https://y6p21.csb.app/

<!-- ============================================================ -->
# ドキュメント
<!-- ============================================================ -->
* **公式ドキュメント**

https://github.com/pmndrs/leva

* **機能一覧**

https://leva.pmnd.rs/?path=/story/inputs-string--simple

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

<!-- ============================================================ -->
# 現状で実装できたインターフェイス
<!-- ============================================================ -->
### インターフェイス

![スクリーンショット 2021-10-28 011345.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358498/54b91a89-f131-6b05-0c86-224a8635f933.png)

### コード
以下を参照してください。

https://codesandbox.io/s/leva-controller-y6p21

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

| type | e.g. |
|:-:|:-:|
| Name | red（[一覧](https://www.w3.org/wiki/CSS/Properties/color/keywords)） |
| 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} |


https://leva.pmnd.rs/?path=/story/inputs-color--all-the-colors

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

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

```.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,
	})
}))
```
この動作は、ドキュメントに記載されています。

https://github.com/pmndrs/leva/blob/master/docs/getting-started.md#folders

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

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

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

https://github.com/pmndrs/leva/blob/master/docs/advanced/controlled-inputs.md

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

```.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>
)
```

https://leva.pmnd.rs/?path=/story/misc-panel-options--collapsed

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

https://leva.pmnd.rs/?path=/story/inputs-button-group--button-group

<!-- ============================================================ -->
# 参考
<!-- ============================================================ -->

https://codesandbox.io/s/leva-busy-dvls9?file=/src/App.js

https://codesandbox.io/s/leva-ui-45bkg?file=/src/App.js