If ~ tutorial ~ implement

Implement/Control flow/If

Often you will want to render components conditionally, for this you can use the If component.

The If component accepts a readable signal which it checks subscribes to and checks for truthiness. This means you can add a signal that is a plain boolean or a more complex signal like User | null.

You render components inside of it conditionally by using the chained .Then(), .Else(), and .ElseIf() methods.

If(open).Then(P("I'm open"));

PreviousComputed values NextForEach

index.ts

import { Button, Div, H1, P, signal, If } from "@implementjs/core";

export default function App() {
	const open = signal(false);

	return Div(H1("If"), Button({ onClick: () => open.toggle() }, "Toggle"), P("I'm open!"));
}

Preview