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.