HomeStarbucks Pattern Library


A simple constructor to manage focus in the DOM, designed to work with React's component lifecycle methods. It is intended for dynamically introduced content such as overlays and modals which feature a close button. In these situations, FocusBoomerang will capture the element which triggered the dynamic content, and return focus to that element when the dynamic content is closed. It also accepts a 'focusedWhenActive' property, and will focus on that element when the dynamic content is added to the DOM.

Example usage

In the constructor of a dynamic content component:

constructor(props) {
  this.focusBoomerang = new FocusBoomerang();

In the componentDidUpdate method of the same component:

componentDidUpdate(prevProps) {
    wasActive: !!prevProps.children,
    isActive: !!this.props.children,
    focusedWhenActive: ReactDOM.findDOMNode(refToYourIntendedFocusElement)