[usePrint]: Nested usage returns false

[HarlesPilter]

Problem

When usePrint is used conditionally under another usePrint hook then the inner hook will return false

const ParentComponent = () => {
  const isPrint = usePrint(); // isPrint=true during printing

  return isPrint ? <NestedComponent /> : 'not printing';
}

const NestedComponent = () => {
  const isPrint = usePrint(); // isPrint=false during printing

  return isPrint ? 'Will not be rendered' : 'Will be rendered';
}

Solution

Create a <PrintingProvider> that tracks the printing state and stores it in Context. usePrint hook returns the value from there. Then all parts of the app will use the same state value. Export PrintingProvider from library but also use it in Layout component (just like AccessibilityProvider).
Added bonus: This way app will only create one listener for beforeprint and one for afterprint, instead of one of each for each usePrint hook.

Examples and information

Example from TISC library