react-datepicker
Version:
A simple and reusable datepicker component for React
32 lines (31 loc) • 1.24 kB
TypeScript
import { type UseFloatingOptions, type Middleware, type Placement, type UseFloatingReturn } from "@floating-ui/react";
import React from "react";
export interface FloatingProps {
hidePopper?: boolean;
popperProps: UseFloatingReturn & {
arrowRef: React.RefObject<SVGSVGElement>;
};
}
export interface WithFloatingProps {
popperModifiers?: Middleware[];
popperProps?: Omit<UseFloatingOptions, "middleware">;
hidePopper?: boolean;
popperPlacement?: Placement;
}
/**
* `withFloating` is a higher-order component that adds floating behavior to a component.
*
* @param Component - The component to enhance.
*
* @example
* const FloatingComponent = withFloating(MyComponent);
* <FloatingComponent popperModifiers={[]} popperProps={{}} hidePopper={true} />
*
* @param popperModifiers - The modifiers to use for the popper.
* @param popperProps - The props to pass to the popper.
* @param hidePopper - Whether to hide the popper.
* @param popperPlacement - The placement of the popper.
*
* @returns A new component with floating behavior.
*/
export default function withFloating<T extends FloatingProps>(Component: React.ComponentType<T>): React.FC<Omit<T, "popperProps"> & WithFloatingProps>;