@vitus-labs/elements
Version:
Most basic react reusable components
52 lines • 1.84 kB
TypeScript
import { type ReactNode } from 'react';
import type { VLComponent, Content } from "../types";
import { type UseOverlayProps } from './useOverlay';
type Align = 'bottom' | 'top' | 'left' | 'right';
type AlignX = 'left' | 'center' | 'right';
type AlignY = 'bottom' | 'top' | 'center';
type TriggerRenderer = (props: Partial<{
active: boolean;
showContent: () => void;
hideContent: () => void;
}>) => ReactNode;
type ContentRenderer = (props: Partial<{
active: boolean;
showContent: () => void;
hideContent: () => void;
align: Align;
alignX: AlignX;
alignY: AlignY;
}>) => ReactNode;
export type Props = {
/**
* Children to be rendered within **Overlay** component when Overlay is active.
*/
children: ContentRenderer | Content;
/**
* React component to be used as a trigger (e.g. `Button` for opening
* dropdowns). Component must acept accept `ref` or any other prop name
* defined in `triggerRefName` prop.
*/
trigger: TriggerRenderer | Content;
/**
* Defines a HTML DOM where children to be appended. Component uses JavaScript
* [`Node.appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)
*
* For more information follow [Portal](https://vitus-labs.com/docs/ui-system/elements/portal)
* component.
*/
DOMLocation?: HTMLElement;
/**
* Defines a prop name to be used for passing `ref` for **trigger**. By default,
* the value is `ref`.
*/
triggerRefName?: string;
/**
* Defines a prop name to be used for passing `ref` for **content** (passed `children`).
* By default, the value is `ref`.
*/
contentRefName?: string;
} & UseOverlayProps;
declare const Component: VLComponent<Props>;
export default Component;
//# sourceMappingURL=component.d.ts.map