https://github.com/fabiospampinato/unstated-compose-suspense

Add suspend/unsuspend support to `unstated-compose`.
https://github.com/fabiospampinato/unstated-compose-suspense

compose performance react suspense unstated

Last synced: about 1 month ago
JSON representation

Add suspend/unsuspend support to `unstated-compose`.

• Host: GitHub
• URL: https://github.com/fabiospampinato/unstated-compose-suspense
• Owner: fabiospampinato
• License: mit
• Archived: true
• Created: 2018-09-25T09:36:07.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-17T14:42:08.000Z (almost 6 years ago)
• Last Synced: 2024-06-24T11:56:30.275Z (3 months ago)
• Topics: compose, performance, react, suspense, unstated
• Language: TypeScript
• Homepage:
• Size: 18.6 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Unstated Compose Suspense

Add suspend/unsuspend support to `unstated-compose`.

## Install

```sh

npm install --save unstated-compose-suspense

```

## Usage

```ts

import {compose, ParentContainer, ChildContainer} from 'unstated-compose-suspense';

@compose ({

  counter: Counter,

  message: Message

})

class App extends ParentContainer {

  update () {

    this.suspend (); // After calling `suspend` the components won't be notified of any state update

    this.ctx.counter.setValue ( 10 ); // This will change the state, but it won't trigger an update of the components

    this.ctx.message.setMessage ( 'Bar' ); // This will change the state, but it won't trigger an update of the components

    this.unsuspend (); // Now updates are no longer suspended. If the state has been updated it will notify the components, just once (instead of twice in this particular case)

  }

}

class Counter extends ChildContainer {

  state = { value: 0 }

  setValue ( value ) {

    this.setState ({ value });

  }

}

class Message extends ChildContainer {

  state = { message: 'Foo' }

  setMessage ( message ) {

    this.setState ({ message });

  }

}

```

## Related

- **[unstated-with-containers](https://github.com/fabiospampinato/unstated-with-containers)**: Higher-Order Component for subscribing to containers.

- **[unstated-connect2](https://github.com/fabiospampinato/unstated-connect2)**: Connect containers to components, without sacrificing performance.

- **[unstated-hmr](https://github.com/fabiospampinato/unstated-hmr)**: Preserve containers' states across Hot-Module-Replacements.

- **[unstated-compose](https://github.com/fabiospampinato/unstated-compose)**: Compose multiple containers into one.

- **[unstated-compose-suspense-middleware](https://github.com/fabiospampinato/unstated-compose-suspense-middleware)**: Add middlewares support to `unstated-compose-suspense`.

- **[unstated-suspense](https://github.com/fabiospampinato/unstated-suspense)**: Suspend/unsuspend updates propagation from your containers.

- **[unstated-suspense-middleware](https://github.com/fabiospampinato/unstated-suspense-middleware)**: Add middlewares support to `unstated-suspense`.

## License

MIT © Fabio Spampinato