Interaction Ring

Installation

Yarn

yarn add @leafygreen-ui/interaction-ring

NPM

npm install @leafygreen-ui/interaction-ring

Example

import InteractionRing from '@leafygreen-ui/interaction-ring';

// When the child is the focused element
<InteractionRing>
  <button>Click me</button>
</InteractionRing>;

// When the focused element is not the child
const [inputElement, setInputElement] = React.useState(null);

<InteractionRing focusTargetElement={inputElement}>
  <div className="Div appearing as button">
    Click me
    <input className="Visually hidden input" ref={setInputElement} />
  </div>
</InteractionRing>;

Output HTML

<div class="leafygreen-ui-1wkamvn">
  <div class="leafygreen-ui-pppkef Div appearing as button">
    Click me<input class="Visually hidden input" />
  </div>
  <div data-leafygreen-ui="interaction-ring" class="leafygreen-ui-ebg95b"></div>
</div>

Properties

| Prop | Type | Description | Default | | -------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | | darkMode | boolean | Whether to display the component in dark mode. | false | | className | string | Adds a className to the container children and the interaction ring. See the following props for ways to customize the interaction ring. | | borderRadius | string | Specify the border radius of the interaction ring. The string format is that which can be passed directly to a border-radius CSS property. | '4px' | | color | { hovered?: boolean, focused?: boolean } | Override the interaction ring color for the specified states. | | | children | React.ReactElement | A single React child that the interaction ring should surround visually. | | focusTargetElement | HTMLElement | The element for which to watch focus events. | The element rendered by the provided children prop | | disabled | boolean | Whether to disable the interaction ring. | false | | forceState | { hovered?: boolean, focused?: boolean } | Force the specified interaction ring states to be displayed. | | |