43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
/**
|
||
|
|
* React implementation of ZName component and useZName hook.
|
||
|
|
*/
|
||
|
|
import React from "react";
|
||
|
|
import type { CSSProperties, ReactNode } from "react";
|
||
|
|
import { ZINDEX_LAYERS, type ZIndexLayerName } from "./constants";
|
||
|
|
/**
|
||
|
|
* Props for the React ZName component.
|
||
|
|
*/
|
||
|
|
interface ReactZNameProps {
|
||
|
|
/** The z-index layer to apply */
|
||
|
|
name: ZIndexLayerName;
|
||
|
|
/** Child content to wrap */
|
||
|
|
children: ReactNode;
|
||
|
|
/** Additional CSS styles */
|
||
|
|
style?: CSSProperties;
|
||
|
|
/** Override z-index value (use sparingly) */
|
||
|
|
zIndex?: number;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Hook to get z-index value for a layer name.
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* ```tsx
|
||
|
|
* const modalZIndex = useZName('modal'); // 2000
|
||
|
|
* const ageGateZIndex = useZName('high-priority'); // 9000
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
export declare function useZName(layer: ZIndexLayerName): number;
|
||
|
|
/**
|
||
|
|
* Component that wraps children in a div with the specified z-index layer.
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* ```tsx
|
||
|
|
* <ZName name="modal" style={{ background: 'white' }}>
|
||
|
|
* <ModalContent />
|
||
|
|
* </ZName>
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
export declare const ZName: React.FC<ReactZNameProps>;
|
||
|
|
export { ZINDEX_LAYERS, type ZIndexLayerName };
|
||
|
|
export default ZName;
|
||
|
|
//# sourceMappingURL=react.d.ts.map
|