27 lines
669 B
JavaScript
27 lines
669 B
JavaScript
import PropTypes from 'prop-types';
|
|
import { useLayoutEffect, useRef } from 'preact/hooks';
|
|
import { createFocusTrap } from 'focus-trap';
|
|
import { defaultChildrenPropTypes } from '../../common-prop-types';
|
|
|
|
export const FocusTrap = ({ selector, children }) => {
|
|
const focusTrap = useRef(null);
|
|
|
|
useLayoutEffect(() => {
|
|
focusTrap.current = createFocusTrap(selector);
|
|
focusTrap.current.activate();
|
|
return () => {
|
|
focusTrap.current.deactivate();
|
|
};
|
|
});
|
|
|
|
return children;
|
|
};
|
|
|
|
FocusTrap.defaultProps = {
|
|
selector: '.crayons-modal',
|
|
};
|
|
|
|
FocusTrap.propTypes = {
|
|
selector: PropTypes.string,
|
|
children: defaultChildrenPropTypes.isRequired,
|
|
};
|