blob: 7dd74468af88518ce2bbb68018bed82abc379038 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import {
forwardRef,
type ForwardRefRenderFunction,
type HTMLAttributes,
type ReactNode,
} from 'react';
import { useScrollLock } from '../../../utils/hooks';
import styles from './overlay.module.scss';
export type OverlayProps = HTMLAttributes<HTMLDivElement> & {
/**
* The elements to display in front of the overlay.
*/
children: ReactNode;
/**
* Should the overlay be visible?
*
* Use it if you want an animated overlay instead of mounting/demounting it.
*
* @default true
*/
isVisible?: boolean;
};
const OverlayWithRef: ForwardRefRenderFunction<HTMLDivElement, OverlayProps> = (
{ children, className = '', isVisible = true, ...props },
ref
) => {
const overlayClass = [
styles.overlay,
styles[isVisible ? 'overlay--visible' : 'overlay--hidden'],
className,
].join(' ');
useScrollLock(isVisible);
return (
<div {...props} className={overlayClass} ref={ref}>
{children}
</div>
);
};
/**
* Overlay component.
*/
export const Overlay = forwardRef(OverlayWithRef);
|
