import { Component, ReactNode } from 'react';
/**
 * A hook for watching media queries.
 *
 * It returns whenever the media query matches or not
 *
 * Example:
 * ```typescript
 * const ShowMessage = () => {
 *   const matches = useMedia('(max-width: 500px)')
 *
 *   return matches
 *     ? <span>Is mobile</span>
 *     : <span>Is desktop</span>
 * }
 * ```
 */
export declare function useMedia(query: string, { ssrMatches }?: {
    ssrMatches?: boolean;
}): boolean;
/**
 * A render prop component for watching media queries.
 *
 * It provides a matches argument to the children function.
 *
 * Example:
 * ```typescript
 * const ShowMessage = () =>
 *   <WithMedia query='(max-width: 500px)'>
 *     {matches => matches
 *       ? <span>Is mobile</span>
 *       : <span>Is desktop</span>
 *     }
 *   </WithMedia>
 * ```
 */
export declare class WithMedia extends Component<{
    query: string;
    children: (matches: boolean) => ReactNode;
    ssrMatches?: boolean;
}, {
    matches: boolean;
}> {
    media: MediaQueryList;
    state: {
        matches: boolean;
    };
    mediaListener: () => void;
    componentDidMount(): void;
    componentDidUpdate(prevProps: this['props']): void;
    componentWillUnmount(): void;
    render(): any;
}