Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
[WIP] Make `to` in `<Subscribe>` support `Container` instances
- Loading branch information
Showing
with
90 additions
and 8 deletions.
- +1 −1 README.md
- +19 −0 __tests__/unstated.tsx
- +4 −0 example/index.html
- +43 −0 example/shared.js
- +23 −7 src/unstated.js
@@ -0,0 +1,43 @@ | ||
// @flow | ||
import React from 'react'; | ||
import { render } from 'react-dom'; | ||
import { Provider, Subscribe, Container } from '../src/unstated'; | ||
|
||
type CounterState = { | ||
count: number | ||
}; | ||
|
||
class CounterContainer extends Container<CounterState> { | ||
state = { count: 0 }; | ||
|
||
increment() { | ||
this.setState({ count: this.state.count + 1 }); | ||
} | ||
|
||
decrement() { | ||
this.setState({ count: this.state.count - 1 }); | ||
} | ||
} | ||
|
||
const sharedCounterContainer = new CounterContainer(); | ||
|
||
function Counter() { | ||
return ( | ||
<Subscribe to={[sharedCounterContainer]}> | ||
{counter => ( | ||
<div> | ||
<button onClick={() => counter.decrement()}>-</button> | ||
<span>{counter.state.count}</span> | ||
<button onClick={() => sharedCounterContainer.increment()}>+</button> | ||
</div> | ||
)} | ||
</Subscribe> | ||
); | ||
} | ||
|
||
render( | ||
<Provider> | ||
<Counter /> | ||
</Provider>, | ||
window.shared | ||
); |