# React · Edge.Surface

DOM 要素に照明効果を適用します。

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

<a id="lighting-surface"></a>

## Edge.Surface

最も近い Edge.Provider に接続した HTML 要素を 1 つレンダリングします。`as` で選んだタグに応じた HTML 属性、イベント、ref を使えます。

```tsx
<Edge.Surface as="article" edgeStyle="raised">
  Your content
</Edge.Surface>
```

| Prop / オプション | 型 | デフォルト | 説明 |
| --- | --- | --- | --- |
| `pseudoElement` | `'after' \| 'before'` | `'after'` | 装飾に使う擬似要素です。既存の ::after を保つには before を選びます。両方が使用済み、またはネイティブ入力の場合はラッパーを使います。不正な値は RangeError を発生させます。 |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | 境界が光に反応する方法です。3 つのスタイルはいずれもコンポーネントの外観を維持します。 |
| `color` | `string` | `currentColor` | ハイライトの色です。デフォルトでは DOM 要素の文字色に従います。CSS 変数を含む任意の CSS 色文字列を指定できます。 |
| `shadowColor` | `string` | `#0008` | 反対側の境界の色です。任意の CSS 色文字列を指定できます。明るいサーフェスの影を消すには transparent を使います。 |
| `borderWidth` | `number` | `1` | 装飾の太さをピクセルで指定します。 DOM 要素の境界線は変えません。負数は 0 に制限され、有限でない値はデフォルト値になります。 |
| `intensity` | `number` | `1` | 共有するライトの強度に掛ける値です。有限値は 0〜1 に制限され、有限でない値はデフォルト値になります。 |
| `as` | `HTML tag name` | `'div'` | 描画する HTML 要素です。ネイティブの属性と ref は選んだタグに従います。独自の React コンポーネントは指定できません。 |
| `children` | `ReactNode` | `Unset` | DOM 要素の内側に表示する内容です。input など擬似要素を直接表示できない要素にはラッパーを使います。 |
| `ref` | `Ref<HTMLElement for the chosen tag>` | `Unset` | 内部登録用の ref とともに描画した要素に渡します。React 19 のコールバック ref のクリーンアップを維持します。 |
| `className` | `string` | `Unset` | 装飾用クラスと結合する既存のクラスです。 |
| `style` | `CSSProperties` | `Unset` | 装飾の設定の後に結合するインラインスタイルです。意図して上書きする場合を除き、Edge が管理する CSS 変数は維持してください。 |

`Edge.Surface` は必ず `Edge.Provider` の内側で使ってください。外側でレンダリングするとエラーになります。input 要素や既存の擬似要素との競合については、[導入時の注意点](https://edge.bolerish.com/ja/docs/integration/)を参照してください。

ハイライトは DOM 要素の境界線の外側に揃います。既存コンポーネントがレンダリングする DOM 要素には、[useSurface](https://edge.bolerish.com/ja/docs/react/use-surface/#use-surface) で接続します。