Skip to content

Instantly share code, notes, and snippets.

@FredrikAugust

FredrikAugust/useIsPrinting.ts

Last active January 29, 2024 19:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save FredrikAugust/e2c5f7c5865be41fa52ab4fd9a5d2853 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save FredrikAugust/e2c5f7c5865be41fa52ab4fd9a5d2853 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. FredrikAugust revised this gist Jan 17, 2023. 2 changed files with 43 additions and 18 deletions.
    23 changes: 5 additions & 18 deletions useIsPrinting.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,16 @@
    type UseIsPrintingOptions = {
    beforePrintCallback: () => void;
    afterPrintCallback: () => void;
    };

    /**
    * Allows you to subscribe to whether or not the window is currently printing (user invoked the system print dialog).
    *
    * @param options An optional object with callbacks to be invoked when the window goes into and/or out of printing mode.
    * @returns Whether or not the document is currently printing.
    */
    export default function useIsPrinting(options?: UseIsPrintingOptions): boolean {
    export default function useIsPrinting(): boolean {
    const [printing, setIsPrinting] = useState(
    window.matchMedia('print').matches
    );

    useEffect(() => {
    const beforeprint = () => {
    options?.beforePrintCallback?.call(null);
    setIsPrinting(true);
    };

    const afterprint = () => {
    options?.afterPrintCallback?.call(null);
    setIsPrinting(false);
    };
    const beforeprint = () => setIsPrinting(true);
    const afterprint = () => setIsPrinting(false);

    window.addEventListener('beforeprint', beforeprint);
    window.addEventListener('afterprint', afterprint);
    @@ -32,7 +19,7 @@ export default function useIsPrinting(options?: UseIsPrintingOptions): boolean {
    window.removeEventListener('beforeprint', beforeprint);
    window.removeEventListener('afterprint', afterprint);
    };
    }, [options?.afterPrintCallback, options?.beforePrintCallback]);
    }, []);

    return printing;
    }
    }
    38 changes: 38 additions & 0 deletions useIsPrintingWithCallbacks.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    type UseIsPrintingOptions = {
    beforePrintCallback: () => void;
    afterPrintCallback: () => void;
    };

    /**
    * Allows you to subscribe to whether or not the window is currently printing (user invoked the system print dialog).
    *
    * @param options An optional object with callbacks to be invoked when the window goes into and/or out of printing mode.
    * @returns Whether or not the document is currently printing.
    */
    export default function useIsPrinting(options?: UseIsPrintingOptions): boolean {
    const [printing, setIsPrinting] = useState(
    window.matchMedia('print').matches
    );

    useEffect(() => {
    const beforeprint = () => {
    options?.beforePrintCallback?.call(null);
    setIsPrinting(true);
    };

    const afterprint = () => {
    options?.afterPrintCallback?.call(null);
    setIsPrinting(false);
    };

    window.addEventListener('beforeprint', beforeprint);
    window.addEventListener('afterprint', afterprint);

    return () => {
    window.removeEventListener('beforeprint', beforeprint);
    window.removeEventListener('afterprint', afterprint);
    };
    }, [options?.afterPrintCallback, options?.beforePrintCallback]);

    return printing;
    }
  2. FredrikAugust created this gist Jan 17, 2023.
    38 changes: 38 additions & 0 deletions useIsPrinting.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    type UseIsPrintingOptions = {
    beforePrintCallback: () => void;
    afterPrintCallback: () => void;
    };

    /**
    * Allows you to subscribe to whether or not the window is currently printing (user invoked the system print dialog).
    *
    * @param options An optional object with callbacks to be invoked when the window goes into and/or out of printing mode.
    * @returns Whether or not the document is currently printing.
    */
    export default function useIsPrinting(options?: UseIsPrintingOptions): boolean {
    const [printing, setIsPrinting] = useState(
    window.matchMedia('print').matches
    );

    useEffect(() => {
    const beforeprint = () => {
    options?.beforePrintCallback?.call(null);
    setIsPrinting(true);
    };

    const afterprint = () => {
    options?.afterPrintCallback?.call(null);
    setIsPrinting(false);
    };

    window.addEventListener('beforeprint', beforeprint);
    window.addEventListener('afterprint', afterprint);

    return () => {
    window.removeEventListener('beforeprint', beforeprint);
    window.removeEventListener('afterprint', afterprint);
    };
    }, [options?.afterPrintCallback, options?.beforePrintCallback]);

    return printing;
    }