indicate
Version:
Scroll indicator for elements with scrollable overflow.
47 lines (46 loc) • 1.7 kB
TypeScript
import React, { ElementType, ReactNode, CSSProperties, DetailedHTMLProps, HTMLAttributes } from 'react';
type Theme = {
outerWrapper?: CSSProperties;
element?: CSSProperties;
innerWrapper?: CSSProperties;
indicator?: CSSProperties;
observer?: CSSProperties;
arrow?: CSSProperties;
hide?: (indicator: HTMLSpanElement) => void | CSSProperties;
show?: (indicator: HTMLSpanElement) => void | CSSProperties;
};
type ArrowIcon = 'arrow-rounded' | 'pointer-rounded' | 'arrow' | 'pointer';
type ArrowPosition = 'center' | 'end' | 'start';
interface ArrowProps {
position: ArrowPosition;
icon: ArrowIcon;
color: string;
image?: string;
markup?: JSX.Element | ReactNode;
}
type ReactHTMLDivElementProperties = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
interface Props {
as?: ElementType<any>;
children: ReactNode;
childAsElement?: boolean;
horizontal?: boolean;
vertical?: boolean;
click?: boolean | {
scrollDenominator: number;
};
color?: string;
width?: string;
style?: CSSProperties;
hideScrollbar?: boolean;
innerStyle?: CSSProperties;
outerStyle?: CSSProperties;
outerWrapperProps?: ReactHTMLDivElementProperties;
innerWrapperProps?: ReactHTMLDivElementProperties;
arrow?: boolean | Partial<ArrowProps>;
theme?: Theme;
show?: (indicator: HTMLSpanElement) => void;
hide?: (hide: HTMLSpanElement) => void;
moveStylesToWrapper?: boolean;
}
export declare const Indicate: React.ForwardRefExoticComponent<Omit<Props & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
export {};