CONAN DATA
CONAN Runtime
Live rendering
Live rendering lets you render your state on the fly on your renderer, no need to have a dedicated component to act as an intermediary.
Being able to easily render state inlined in your JSX it's pretty neat!
There are three mechanisms for live rendering.
Direct
Data only
It takes a renderer function as argument.
All you need is to be able to access the ConanState instance.
Js
Ts
1
{counterState$.connectLive(data => (<h1>{data.counter}</h1>))}
2
​
Copied!
1
import {counterState$} from "../../state/counter.statequot;;
2
​
3
​
4
<button onClick={counterState$.do.increment}>Increment!</button>
5
<button onClick={counterState$.do.decrement}>Decrement!</button>
6
{counterState$.connectLive(data=>(<div>
7
<h1>{data.counter}</h1>
8
</div>
9
))}
10
​
Copied!
Data and Monitor Info
Js
1
​
2
{
3
counterState$
4
.tuple(counterState$.asyncState)
5
.connectLive((data, monitorInfo) =>
6
(<h1>{data.counter} - {monitorInfo.status}</h1>)
7
)
8
}
9
​
Copied!
HOC
We can also use a High Order Component with live rendering, by using the components StateLive and ContextStateLive:
​
Js
Ts
1
import {ContextStateLive, StateLive} from "conan-js-core";
2
import { counterState$ } from "../../state/counter.statequot;;
3
​
4
<StateLive from={counterState$} renderer={(data, actions) => (<div>
5
<button onClick={actions.increment}>Increment!</button>
6
<button onClick={actions.decrement}>Decrement!</button>
7
</div>)}/>;
8
};
9
​
10
<ContextStateLive renderer={data => (<h1>{data.counter}</h1>)}/>
11
​
Copied!
1
import {ContextStateLive, StateLive} from "conan-js-core";
2
import {CounterActions, CounterData, counterState$} from "../../state/counter.statequot;;
3
​
4
<StateLive<CounterData, CounterActions>
5
from={counterState$}
6
renderer={(data, actions)=>(
7
<div>
8
<button onClick={actions.increment}>Increment!</button>
9
<button onClick={actions.decrement}>Decrement!</button>
10
<CounterDisplay/>
11
</div>
12
)}
13
/>
14
​
15
<ContextStateLive <CounterData>
16
renderer={data => (
17
<h1>{data.counter}</h1>
18
)}
19
/>
20
​
Copied!
​
Composition
Live rendering can also be used with composition. ConanJs provides the functions contextStateLive and stateLive for it:
Js
Ts
1
import {contextStateLive, stateLive} from "conan-js-core";
2
import { counterState$ } from "../../state/counter.statequot;;
3
​
4
stateLive(counterState$, (data, actions) => (<div>
5
<button onClick={actions.increment}>Increment!</button>
6
<button onClick={actions.decrement}>Decrement!</button>
7
<CounterDisplay />
8
</div>));
9
10
contextStateLive(data => (<h1>{data.counter}</h1>))
Copied!
1
import {contextStateLive, stateLive} from "conan-js-core";
2
import {CounterActions, CounterData, counterState$} from "../../state/counter.statequot;;
3
​
4
stateLive<CounterData, CounterActions>(
5
counterState$,
6
(data, actions) => (
7
<div>
8
<button onClick={actions.increment}>Increment!</button>
9
<button onClick={actions.decrement}>Decrement!</button>
10
<CounterDisplay/>
11
</div>
12
)
13
)
14
​
15
contextStateLive<CounterData>( data => (
16
<h1>{data.counter}</h1>
17
));
Copied!
​
Please take a look at this code sandbox to see al the subscription approaches working:
https://codesandbox.io/s/2zgr0
codesandbox.io
Last modified 1yr ago
Copy link