Hello World

Search…
Hello World
Have a look at the simplest example with Conan State.
This is our attempt to wow you, note that this is only a sample of all the different ways to work with ConanState
Easy to create and render
​To create a Conan State you only need a name, and optionally, an initial state
1
//name: counter, initialState: 0
2
const yetAnotherCounter$ = Conan.light('counter', 0)
Copied!
Conan has live rendering, meaning, you can inline the state in your renderer.
1
function render() {
2
    return yetAnotherCounter$.renderLive (
3
        (counterValue)=>(<h1>{counterValue}</h1>)
4
    )
5
}
6
​
Copied!
Easy to update
Every ConanState has two actions available immediately: 'update' and  'updateAsap'.
Let's add some buttons now tow change the state of the counter:
1
function render() {
2
    return (<div>
3
        yetAnotherCounter$.renderLive (
4
            (counterValue)=>(<h1>{counterValue}</h1>)
5
        )
6
        <button onClick={()=>yetAnotherCounter$.do.update(3)}>
7
            setValueTo3
8
        </button>
9
        <button onClick={()=>yetAnotherCounter$.do.update(current=>++current)}>
10
            increase by one
11
        </button>
12
    </div>)
13
}
14
​
Copied!
Note how we can use the update method to either provide a new value, or we can provide a reducer to provide a value that is based on its current value.
Easy to do async updates
Quick fact, with ConanJs you won't need boilerplate code to deal with asynchronous code. 
You are probably speechless now...
Let's add two buttons to show async updates to the value.
​
1
function render() {
2
    return (<div>
3
        yetAnotherCounter$.renderLive (
4
            (counterValue)=>(<h1>{counterValue}</h1>)
5
        )
6
        <button onClick={()=>yetAnotherCounter$.do.update(3)}>
7
            setValueTo3
8
        </button>
9
        <button onClick={()=>yetAnotherCounter$.do.update(current=>++current)}>
10
            increase by one
11
        </button>
12
        <button onClick={()=>yetAnotherCounter$.do.updateAsap(
13
            Asaps.delayed(3, 1000)
14
        )}>
15
            setValueTo3 - asnyc
16
        </button>
17
        <button onClick={()=>yetAnotherCounter$.do.updateAsap(
18
            Asaps.delayed(current=>++current, 1000)
19
        )}>
20
            increase by one - async
21
        </button>
22
​
23
    </div>)
24
}
Copied!
Easy to derive and compose state
Let's filter only even numbers, and double the current value of the state
1
<h1>
2
    EVEN NUMBERS: {yetAnotherCounter$.filter(it=>it % 2 === 0).connectLive (
3
        (counterValue)=>(<span>{counterValue}</span>)
4
    )}
5
</h1>
6
<h1>
7
    DOUBLE: {yetAnotherCounter$.map(it=>it * 2).connectLive (
8
        (counterValue)=>(<span>{counterValue}</span>)
9
    )}
10
</h1>
Copied!
Demo
What's next?
​
In 'How to install/use ConanJs' we will show you how to get this code running on your end.
 Are you ready to dive in? 
Yes, show me more code!  https://docs.conanjs.io/tutorials/todos-sync​
Yes, I prefer reading up! https://docs.conanjs.io/conan-state​
Just let me know how to start using it! https://docs.conanjs.io/how-to-install-use-conanjs​
NO! :(  Would you mind reaching out to us to let us know how we can improve?
Demos - Previous
Conan State Demos
Todos
Last modified 1yr ago
Copy link
Contents
Easy to create and render
Easy to update
Easy to do async updates
Easy to derive and compose state
Demo
What's next?