focus-boomerang
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) {
super(props);
this.focusBoomerang = new FocusBoomerang();
}
In the componentDidUpdate
method of the same component:
componentDidUpdate(prevProps) {
this.focusBoomerang.check({
wasActive: !!prevProps.children,
isActive: !!this.props.children,
focusedWhenActive: ReactDOM.findDOMNode(refToYourIntendedFocusElement)
});
}