# React · Uso

Empieza con Edge.Provider y Edge.Surface. Usa useSurface para conectar directamente un componente existente.

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

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

## Conectar un área

Completa primero la [Instalación](https://edge.bolerish.com/es/docs/installation/). Si tu framework usa Componentes de Servidor, usa Edge en un módulo cliente con la directiva `"use client"`.

Envuelve el área con `Edge.Provider` y usa `Edge.Surface` solo en los elementos que deban responder. Las dos tarjetas comparten una luz. Cada Edge.Provider anidado crea una luz independiente.

Una luz, tus componentes

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

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

## Conservar estilos y eventos

Elige la etiqueta HTML con `as`. Puedes usar sus atributos, eventos y refs nativos, y aplicar tus estilos mediante `className` y `style`. Edge.Provider no añade elementos DOM; cada Edge.Surface renderiza un elemento.

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

Los elementos input necesitan un contenedor. Si hay conflictos con la decoración existente, consulta [Consideraciones de integración](https://edge.bolerish.com/es/docs/integration/). Configura la apariencia en [Estilo](https://edge.bolerish.com/es/docs/styles/) y el movimiento en [Movimiento](https://edge.bolerish.com/es/docs/motion/).

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

## Conectar un componente existente

Si Card o Button ya renderiza su propio elemento HTML, llama a [useSurface(options)](https://edge.bolerish.com/es/docs/react/use-surface/#use-surface) dentro del componente y asigna el ref devuelto a ese elemento. Mantén el componente dentro de Edge.Provider. En React 18, reenvía el ref mediante `forwardRef`.

Si cambia la posición del elemento, consulta [actualizaciones de diseño](https://edge.bolerish.com/es/docs/integration/#refresh-after-layout-changes).