Learn SOLID-JS with Real Code Examples

import { createSignal } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    const [isDark, setIsDark] = createSignal(false);

    const increment = () => setCount(count() + 1);
    const decrement = () => setCount(count() - 1);
    const reset = () => setCount(0);
    const toggleTheme = () => setIsDark(!isDark());

    return (
        <div class={isDark() ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count()}</h2>
        <div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
        </div>
        <button onClick={toggleTheme}>Switch to {isDark() ? 'Light' : 'Dark'} Theme</button>
        </div>
    );
}

export default Counter;

Demonstrates a simple counter component using Solid.js reactive signals and event handling.

import { createSignal, onMount } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    const [isDark, setIsDark] = createSignal(false);

    onMount(() => {
        const savedCount = localStorage.getItem('count');
        if (savedCount) setCount(parseInt(savedCount, 10));
        const savedTheme = localStorage.getItem('isDark');
        if (savedTheme) setIsDark(savedTheme === 'true');
    });

    const updateAndSave = (newCount) => {
        setCount(newCount);
        localStorage.setItem('count', newCount);
    };

    return (
        <div class={isDark() ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count()}</h2>
        <button onClick={() => updateAndSave(count() + 1)}>+</button>
        <button onClick={() => updateAndSave(count() - 1)}>-</button>
        <button onClick={() => updateAndSave(0)}>Reset</button>
        <button onClick={() => {
        setIsDark(!isDark());
        localStorage.setItem('isDark', !isDark());
        }}>Toggle Theme</button>
        </div>
    );
}

export default Counter;

Persists counter value in localStorage using Solid.js signals.

import { createSignal, createMemo } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    const parity = createMemo(() => (count() % 2 === 0 ? 'Even' : 'Odd'));

    return (
        <div>
        <h2>Counter: {count()} ({parity()})</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Displays whether the counter is even or odd using a derived signal.

import { createSignal, createEffect } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    createEffect(() => console.log('Counter changed:', count()));

    return (
        <div>
        <h2>Counter: {count()}</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Logs counter changes using a Solid.js effect.

import { createSignal, createEffect } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    const [isDark, setIsDark] = createSignal(false);

    createEffect(() => {
        if (count() > 5) setIsDark(true);
        else setIsDark(false);
    });

    return (
        <div class={isDark() ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count()}</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Automatically switches theme to dark when counter exceeds 5.

import { createSignal, createMemo } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    const bgColor = createMemo(() => count() > 0 ? 'lightgreen' : 'lightcoral');

    return (
        <div style={{ background: bgColor() }}>
        <h2>Counter: {count()}</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Applies dynamic styles based on counter value using a memo.

import { createSignal } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);

    const dispatchUpdate = () => {
        const event = new CustomEvent('counterUpdate', { detail: count() });
        document.dispatchEvent(event);
    };

    return (
        <div>
        <h2>Counter: {count()}</h2>
        <button onClick={() => { setCount(count() + 1); dispatchUpdate(); }}>+</button>
        <button onClick={() => { setCount(count() - 1); dispatchUpdate(); }}>-</button>
        </div>
    );
}

export default Counter;

Dispatches custom events on counter updates.

import { createSignal } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    return (
        <div>
        <h2>Counter: {count()}</h2>
        <input type='number' value={count()} onInput={(e) => setCount(+e.target.value)} />
        </div>
    );
}

export default Counter;

Binds counter to an input field using two-way binding.

import { createSignal } from 'solid-js';

function Counter(props) {
    const [count, setCount] = createSignal(0);
    return (
        <div>
        <h2>Counter: {count()}</h2>
        {props.children}
        </div>
    );
}

export default Counter;

Uses a slot to allow custom button placement in a Solid.js component.

import { createSignal, onMount } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    onMount(() => console.log('Mounted with count =', count()));
    return (
        <div>
        <h2>Counter: {count()}</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Uses Solid.js onMount hook to log initial counter state.