# React · Usage

Start with Edge.Provider and Edge.Surface. Use useSurface to connect an existing component directly.

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

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

## Connect an area

Complete [Installation](https://edge.bolerish.com/docs/installation/) first. In Server Component frameworks, use Edge from a client module marked with `"use client"`.

Wrap the area in `Edge.Provider` and mark each responding element with `Edge.Surface`. The two cards below share one light; nested providers create independent lights.

One light, your components

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

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

## Keep your styles and events

Use `as` to choose the HTML element. Native attributes, events and refs follow that element. Optional `className` and `style` props apply your styles. The provider adds no DOM; each surface renders one element.

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

Inputs need a wrapper. If an existing decoration conflicts, see [Integration considerations](https://edge.bolerish.com/docs/integration/). Choose appearance and movement in [Style](https://edge.bolerish.com/docs/styles/) and [Motion](https://edge.bolerish.com/docs/motion/).

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

## Connect an existing component

If a Card or Button already renders its own HTML element, call [useSurface(options)](https://edge.bolerish.com/docs/react/use-surface/#use-surface) inside it and attach the returned ref to that element. Keep the component inside Edge.Provider. React 18 function components must forward the ref with `forwardRef`.

For position changes, see [layout updates](https://edge.bolerish.com/docs/integration/#refresh-after-layout-changes).