Live rendering

Search…
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
You can use the method connectLive from the ConanState object directly.
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!
You can see this in our Hello Wow! demo.
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:
Observing State
Connecting
Last modified 1yr ago
Copy link
Contents
Direct
Data only
Data and Monitor Info
HOC
Composition