Reactive Counter Example

This example demonstrates how to create a simple reactive counter using LemonadeJS.

<html>
<script src="https://lemonadejs.com/v5/lemonade.js"></script>
<div id='root'></div>
<script>
let { state } = lemonade;
function Counter() {
    // Create a state object
    let count = state(0);

    // Update state methods
    const add = function() {
        count.value++;
    }

    const remove = function() {
        count.value--;
    }

    const reset = function() {
        count.value = 0;
    }

    return render => render`<div>
        <p>Count ${count}</p>
        <div>
            <input type="button" onclick="${add}" value="+" />
            <input type="button" onclick="${remove}" value="-" />
            <input type="button" onclick="${reset}" value="Reset" />
        </div>
    </div>`;
};
lemonade.render(Counter, document.getElementById('root'));
</script>
</html>

import { state } from 'lemonadejs';

export default function Counter() {
    const self = this;

    self.count = state(0);

    const add = () => {
        self.count++;
    };

    const remove = () => {
        self.count--;
    };

    const reset = () => {
        self.count = 0;
    };

    return render => render`
        <div>
            <p>Count: ${self.count}</p>
            <div>
                <input type="button" onclick=${add} value="+" />
                <input type="button" onclick=${remove} value="-" />
                <input type="button" onclick=${reset} value="Reset" />
            </div>
        </div>
    `;
}

Edit this page on GitHub

Jspreadsheet Pro

Reactive Counter Example