react-suspender

React component that forcefully suspends the component tree.

Install

npm install --save react-suspender

Usage

import React, { Component, Suspense } from 'react'

import Suspender from 'react-suspender'

class SuspendExample extends Component {
  render () {
    return (
      <Suspense fallback={<div>Suspended</div>}>
        <Suspender />
      </Suspense>
    )
  }
}

Another example, you can suspend your component tree while data fetching.

import React, { Component, Suspense } from 'react'

import Suspend from 'react-suspender'

function SuspendExample () {
  const [ dataLoaded, setDataLoaded ] = React.useState(false);

  // Fetch Data
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setDataLoaded(true);
    }, 1000);

    return () => clearTimeout(timer);
  });

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Suspender suspend={!dataLoaded} >
        API data loaded !!!
      </Suspender>
    </Suspense>
  )
}

Props

• suspend : bool

License

MIT © kanitsharma