@1productaweek/react-wait-for-window

Wait for a window prop to become ready (e.g. when loading scriprs async)

Usage no npm install needed!

<script type="module">
  import 1productaweekReactWaitForWindow from 'https://cdn.skypack.dev/@1productaweek/react-wait-for-window';
</script>

README

React Wait for Window

Waits for a window prop to become available. E.g. if you're loading Stripe async, you will need to wait for it to become available before trying to use any components that rely on it.

npm install @1producataweek/react-wait-for-window

useWaitForWindow(prop: string, timer: number): boolean

A hook that will update when the window prop becomes available. Returns true/false depending on whether the prop is set on window. The timer is the interval that the prop should be checked.

importĀ { useWaitForWindow } from '@1producataweek/react-wait-for-window'

function Component () {
  const propIsAvailable = useWaitForWindow('stripe', 1000)

  if (!propIsAvailable) return 'Loading'

  return <ComponentThatDependsOnWindowProp />
}

WaitForWindow

A hook that will update when the window prop becomes available. Returns true/false depending on whether the prop is set on window. The timer will set

importĀ { WaitForWindow } from '@1producataweek/react-wait-for-window'

function Component () {
  return (
    <WaitForWindow prop='' timer={1000}>
      <ComponentThatDependsOnWindowProp />
    </WaitForWindow>
  )
}

Made by 1PAW

https://1productaweek.com | |- Ralley - queue as a service |- Snapboard - simple hackable dashboard