Skip to content
bolerish/edge

Usage

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

Connect an area

Complete 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.

Example card

Both cards respond to the same light.

Another example card

Both cards respond to the same light.

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.

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

Inputs need a wrapper. If an existing decoration conflicts, see Integration considerations. Choose appearance and movement in Style and Motion.

Connect an existing component

If a Card or Button already renders its own HTML element, call useSurface(options) 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.

bolerish/edge · React