cubic-bezierを入力できるコンポーネント

Cubic Bezier Input

Radixみたいにスタイルを簡単に調整できて、柔軟に使えるベジェ曲線の入力コンポーネントが欲しかったのでv0を使って作ってみました！誰もが使えるよう、npmパッケージとしても公開しました📦

実際のコンポーネント：
https://cubic-bezier-input.vercel.app

GitHubレポジトリ：
https://github.com/501A-gh/cubic-bezier-input

インストール

npm install cubic-bezier-input

コンポーネントの構成

Radixみたいにすべてのパーツをインポートして、自由に組み合わせることができます。

<CubicBezier.Root>
  <CubicBezier.Grid />
  <CubicBezier.Controller index={1}>
    <CubicBezier.Line />
    <CubicBezier.Thumb />
  </CubicBezier.Controller>
  <CubicBezier.Controller index={2}>
    <CubicBezier.Line />
    <CubicBezier.Thumb />
  </CubicBezier.Controller>
  <CubicBezier.Curve>
    <CubicBezier.End />
  </CubicBezier.Curve>
</CubicBezier.Root>

API仕様

すべてのコンポーネントにはclassNameプロパティが用意されており、Tailwindなどを使って簡単にスタイリングできます。
曲線やグリッドは SVG で描画されているため、fill-*やstroke-*といったユーティリティクラスで柔軟にスタイルを調整できます。
実際の使い方については、使用例をご覧いただくとイメージがつかみやすいです。

Root

プロパティ	型	デフォルト値	説明
value	[number, number, number, number]	-	現在のベジェ曲線の値
defaultValue	[number, number, number, number]	[0.25, 0.1, 0.25, 1]	初期値
onValueChange	(value: [number, number, number, number]) => void	-	値が変更されたときに呼ばれるコールバック
onValueCommit	(value: [number, number, number, number]) => void	-	値が確定したときに呼ばれるコールバック
viewBoxPadding	number	10	SVGのviewBoxに対するパディング

Controller

プロパティ	型	デフォルト値	説明
index	1または2	-	コントロールポイントのインデックス

Thumb

プロパティ	型	デフォルト値	説明
r	number	5	コントロールポイントの半径

End

プロパティ	型	デフォルト値	説明
r	number	2	始点・終点の半径