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