Learn RIOT-JS with Real Code Examples

<counter>
    <h2>Counter: {state.count}</h2>
    <div>
        <button onclick={() => state.count++}>+</button>
        <button onclick={() => state.count--}>-</button>
        <button onclick={() => state.count = 0}>Reset</button>
    </div>
    <button onclick={() => state.isDark = !state.isDark}>Switch to {state.isDark ? 'Light' : 'Dark'} Theme</button>

    <script>
        export default {
        state: { count: 0, isDark: false }
        }
    </script>
</counter>

<script type="module">
    import { component } from 'riot';
    import Counter from './counter.riot';
    component(Counter)(document.body);
</script>
<style>
    .dark-theme { background-color: #222; color: #eee; }
    .light-theme { background-color: #fff; color: #000; }
</style>

Basic Riot.js counter with dark/light theme toggle.

<step-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count += state.step}>+</button>
    <button onclick={() => state.count -= state.step}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, step: 2 }
        }
    </script>
</step-counter>

Counter increments/decrements by a step value.

<max-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count < state.max && state.count++}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, max: 5 }
        }
    </script>
</max-counter>

Stops incrementing after a maximum count is reached.

<auto-reset-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count = (state.count + 1 > state.threshold ? 0 : state.count + 1)}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, threshold: 10 }
        }
    </script>
</auto-reset-counter>

Automatically resets when counter exceeds a threshold.

<history-counter>
    <h2>Counter: {state.count}</h2>
    <div>History: {state.history.join(', ')}</div>
    <button onclick={() => { state.count++; state.history.push('Increment'); }}>+</button>
    <button onclick={() => { state.count--; state.history.push('Decrement'); }}>-</button>
    <button onclick={() => { state.count = 0; state.history.push('Reset'); }}>Reset</button>

    <script>
        export default {
        state: { count: 0, history: [] }
        }
    </script>
</history-counter>

Tracks increment/decrement history.

<dark-mode-counter>
    <h2>Counter: 0</h2>
    <button onclick={() => state.isDark = !state.isDark}>Toggle Theme</button>

    <script>
        export default {
        state: { isDark: false }
        }
    </script>
</dark-mode-counter>

Static counter with only dark/light theme toggle.

<auto-increment-counter>
    <h2>Counter: {state.count}</h2>

    <script>
        export default {
        state: { count: 0 },
        onMounted() {
        setInterval(() => { state.count++; }, 1000);
        }
        }
    </script>
</auto-increment-counter>

Automatically increments counter every second.

<conditional-theme-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count++}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>
    <div>Theme: {state.count % 2 === 0 ? 'Dark' : 'Light'}</div>

    <script>
        export default { state: { count: 0 } }
    </script>
</conditional-theme-counter>

Theme changes automatically based on even/odd counter value.

<full-counter>
    <h2>Counter: {state.count}</h2>
    <div>History: {state.history.join(', ')}</div>
    <button onclick={() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Increment'); }}>+</button>
    <button onclick={() => { state.count-=state.step; state.history.push('Decrement'); }}>-</button>
    <button onclick={() => { state.count=0; state.history.push('Reset'); }}>Reset</button>
    <button onclick={() => state.isDark=!state.isDark}>Toggle Theme</button>

    <script>
        export default {
        state: { count: 0, history: [], isDark: false, step: 2, max: 10 },
        onMounted() {
        setInterval(() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Auto Increment'); }, 1000);
        }
        }
    </script>
</full-counter>

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.