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