Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fabiospampinato/unstated-compose
Compose multiple containers into one.
https://github.com/fabiospampinato/unstated-compose
compose containers react unstated
Last synced: about 1 month ago
JSON representation
Compose multiple containers into one.
- Host: GitHub
- URL: https://github.com/fabiospampinato/unstated-compose
- Owner: fabiospampinato
- License: mit
- Archived: true
- Created: 2018-09-15T07:17:23.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-20T22:47:42.000Z (over 5 years ago)
- Last Synced: 2024-07-25T04:21:41.450Z (about 2 months ago)
- Topics: compose, containers, react, unstated
- Language: TypeScript
- Size: 76.2 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Unstated Compose
Compose multiple containers into one.
This is useful when you want to have a single container, perhaps subscribed to via [unstated-connect2](https://github.com/fabiospampinato/unstated-connect2), but it starts to become too big. This package allows you to refactor it into multiple separate containers that can still be merged back together.
## Install
```sh
npm install --save unstated-compose
```
## Usage
It allows to write an app like the following, where there are multiple containers, which can access each other's methods and state, while your components still consume only 1 container.
```tsx
/* IMPORT */
import * as React from 'react';
import {render} from 'react-dom';
import {Provider, Subscribe} from 'unstated';
import {compose, ChildContainer, ParentContainer} from 'unstated-compose';
/* CONTAINERS */
class CounterContainer extends ChildContainer {
state = {
counter: 123
}
get = () => {
return this.state.counter;
}
set = ( counter ) => {
this.setState ({ counter });
}
setMessage = () => {
this.ctx.message.set ( 'Hello from the CounterContainer' );
}
setJoke = () => {
this.ctx.setJoke ( 'Hello from the CounterContainer' );
}
}
class MessageContainer extends ChildContainer {
state = {
message: 'Default message'
}
get = () => {
return this.state.message;
}
set = ( message ) => {
this.setState ({ message });
}
setCounter = () => {
this.ctx.counter.set ( 'Hello from the MessageContainer' );
}
setJoke = () => {
this.ctx.setJoke ( 'Hello from the MessageContainer' );
}
}
@compose ({
counter: CounterContainer,
message: MessageContainer
})
class AppContainer extends ParentContainer {
state = {
joke: 'Default joke'
}
get = () => {
return this.state.joke;
}
setJoke = ( joke ) => {
this.setState ({ joke });
}
setCounter = () => {
this.ctx.counter.set ( 'Hello from the AppContainer' );
}
setMessage = () => {
this.message.set ( 'Hello from the AppContainer' ); // `.ctx` can be omitted in the parent container
}
}
/* APP */
const App = () => (
{
app => (
Counter
{app.counter.get ()}
app.counter.set ( Math.random () )}>Update from CounterContainer
Update from MessageContainer
Update from AppContainer
Message
{app.state.message.message}
app.message.set ( `Now is: ${Date.now()}`)}>Update from MessageCounter
Update from CounterContainer
Update from AppContainer
Joke
{app.state.joke}
app.setJoke ( `Joke coming in ${Date.now ()}...` )}>Update from AppContainer
Update from CounterContainer
Update from MessageContainer
)
}
);
render (
,
document.getElementById ( 'app' )
);
```
## 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-suspense](https://github.com/fabiospampinato/unstated-compose-suspense)**: Add suspend/unsuspend support to `unstated-compose`.
- **[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