# React · 使い方

まず Edge.Provider と Edge.Surface を使用してください。既存のコンポーネントに直接接続する場合は useSurface を使用できます。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ja/docs/react/usage/

<a id="share-one-light"></a>

## 領域を接続する

まず[インストール](https://edge.bolerish.com/ja/docs/installation/)を完了してください。サーバーコンポーネントを使うフレームワークでは、`"use client"` を宣言したクライアントモジュール内で Edge を使います。

光を共有する領域を `Edge.Provider` で囲み、反応させる要素にだけ `Edge.Surface` を使います。下の 2 つのカードは同じ光に反応します。Edge.Provider を入れ子にすると、独立した光を作れます。

既存のコンポーネントでライトを共有する

```tsx
<Edge.Provider>
  <Edge.Surface>Example card</Edge.Surface>
  <Edge.Surface>Another example card</Edge.Surface>
</Edge.Provider>
```

<a id="keep-your-styles"></a>

## スタイルとイベントを維持する

`as` でレンダリングする HTML タグを選びます。その要素の HTML 属性、イベント、ref を使え、`className` と `style` で既存のスタイルを適用できます。Edge.Provider は DOM 要素を追加せず、各 Edge.Surface は要素を 1 つレンダリングします。

```tsx
<Edge.Surface as="button" type="button" onClick={handleExampleClick}>
  Example button
</Edge.Surface>
```

input 要素にはラッパーが必要です。既存の装飾と競合する場合は[導入時の注意点](https://edge.bolerish.com/ja/docs/integration/)を参照してください。外観は[スタイル](https://edge.bolerish.com/ja/docs/styles/)、動きは[動き](https://edge.bolerish.com/ja/docs/motion/)で設定できます。

<a id="connect-existing-components"></a>

## 既存コンポーネントを接続する

Card や Button が自身の HTML 要素をレンダリングしている場合は、コンポーネント内で [useSurface(options)](https://edge.bolerish.com/ja/docs/react/use-surface/#use-surface) を呼び、返された ref をその要素に渡します。コンポーネントは Edge.Provider の内側に配置してください。React 18 の関数コンポーネントでは `forwardRef` で ref を転送します。

要素の位置が変わる場合は、[レイアウトの更新](https://edge.bolerish.com/ja/docs/integration/#refresh-after-layout-changes)を参照してください。