Built-in Components

JSX is JavaScript, so normal conditions, functions and array operations can be used to decide what a component returns. A simple reactive condition can be written as a function, for example:

import { createSignal } from "@kayahr/signal";

function App() {
    const [ loggedIn ] = createSignal(false);

    return <main>
        {() => loggedIn() ? <Dashboard /> : <Login />}
    </main>;
}
Copy

Harmless also provides a small set of ready-made components for common rendering tasks. They make larger templates easier to read and provide the correct lifecycle and list-reuse behavior without requiring application code to manage DOM nodes itself.

• If - Selects between two branches.
• Choose - Selects the first matching When branch and falls back to an optional Otherwise branch.
• For - Updates a list while preserving the identity of matching rows.
• Routes and Route - Select the first matching route branch from the current URL hash.
• A - Renders links for hash navigation and can apply different classes to active and inactive links.