/**
 * Sticky Boxes with sensible behaviour if the content is bigger than the viewport.
 *
 * Use as a Component:
 *
 * import StickyBox from "shared/StickyBox";
 *
 * const Page = () => (
 *   <div className="row">
 *     <StickyBox offsetTop={20} offsetBottom={20}>
 *       <div>Sidebar</div>
 *     </StickyBox>
 *     <div>Content</div>
 *   </div>
 * );
 *
 * Or via the useStickyBox hook
 * import {useStickyBox} from "shared/StickyBox";
 *
 * const Page = () => {
 * const stickyRef = useStickyBox({offsetTop: 20, offsetBottom: 20})
 *   <div className="row">
 *   <aside ref={stickyRef}>
 *   <div>Sidebar</div>
 * </aside>
 * <div>Content</div>
 * </div>
 * };
 *
 */
import React from 'react';
/**
 * Types/interfaces
 */
export type UseStickyBoxProps = {
    offsetTop?: number;
    offsetBottom?: number;
    bottom?: boolean;
};
export type StickyBoxProps = UseStickyBoxProps & {
    style?: React.CSSProperties;
    className?: string;
    children?: React.ReactNode;
};
export type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
export type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
/**
 * useStickyBox
 * @param offsetTop
 * @param offsetBottom
 * @param bottom
 */
export declare const useStickyBox: useStickyBox;
/**
 * StickyBox component
 * @param offsetTop
 * @param offsetBottom
 * @param bottom
 * @param children
 * @param className
 * @param style
 * @constructor
 */
declare const StickyBox: StickyBoxComponent;
export default StickyBox;