Nearsighted Paramecium Multiverse

    react-disposable-decorator

    4.0.2 • Public • Published

    react-disposable-decorator

    Decorator for automatically canceling observable and other subscriptions when a React component is unmounted.

    A cancelWhenUnmounted function is passed to the decorated component as a prop, which should be called with an observable subscription (a disposable). Click here for more documentation on canceling observables.

    Also, a cancelAllSubscriptions function is passed to the decorated component as a prop. This should be called with no arguments, and will cancel all subscriptions that were registered via cancelWhenUnmounted. It will also reset the list of subscriptions to be empty, so that future calls to cancelWhenUnmounted and cancelAllSubscriptions will start fresh. Note that cancelAllSubscriptions is automatically called during componentWillUnmount.

    Finally, react-disposable-decorator uses the forwardRef API (requires 16.3+) so it is possible to access the original component.

    Installation

    npm install react-disposable-decorator or yarn add react-disposable-decorator

    Usage

    import Cancelable from 'react-disposable-decorator';
     
    @Cancelable //decorate the component
    export default class SomeComponent extends React.Component {
      componentDidMount() {
        this.props.cancelWhenUnmounted(
          /* This will be automatically canceled if the observable does not
           * onComplete or onError before the React component is unmounted.
           */
          fetchSomeData.subscribe( data => this.setstate({data}) )
        );
      }
      componentDidUpdate(prevProps) {
        // Example usage of how you might use cancelAllSubscriptions
        if (this.props.needToMakeNewSubscriptions) {
          this.props.cancelAllSubscriptions();
          this.props.cancelWhenUnmounted(
            fetchSomeData.subscribe(data => this.setState({data}));
          );
        }
      }
    }
    ...

    In tests

    If you're using Enzyme shallow rendering, try doing shallow(<Foo />).dive() on components decorated with react-disposable-decorator to be able to test the wrapped component.

    If you wish to disable the react-disposable-decorator in tests altogether (so you don't have to .dive()), you can set a global variable global.disableReactDisposableDecorator = true in your test configuration before you import the react-disposable-decorator javascript module into the test environment.

    Refs

    react-disposable-decorator uses react 16.3+ and the forwardRef API to ensure that your refs go to the original component and not the decorated component. Using refs to access components have good use cases listed here.

    import Cancelable from 'react-disposable-decorator'
     
    @Cancelable
    class Hello extends React.Component {
      constructor(props) {
        super(props)
          this.logHello = this.logHello.bind(this)
      }
      logHello() {
        console.log('hello')
      }
      render () {
        <div>
          Hello
        </div>
      }
    }
     
    class wrappingComponent extends React.Component {
      componentDidMount() {
        this.hello.logHello()
        // calls logHello
      }
      render () {
        return (
          <div>
            <Hello ref={el => this.hello = el}>
          </div>
        )
      }
    }
     

    Keywords

    none

    Install

    npm i react-disposable-decorator

    DownloadsWeekly Downloads

    96

    Version

    4.0.2

    License

    Apache-2.0

    Unpacked Size

    38.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • parkm
    • greenjeffreym
    • mmemory
    • ron.douglas
    • miracastillo
    • geoctrl
    • tannerrigby
    • rchilds
    • joeldenning
    • blittle
    • themcmurder
    • alanandersen