| Hello world component |
export const HelloWorld = component$(() => {
return <div>Hello world</div>;
});
|
export function HelloWorld() {
return <div>Hello world</div>;
}
|
| Button with a click handler |
export const Button = component$(() => {
return <button onClick$={() => console.log('click')}>Click me</button>;
});
|
export function Button() {
return <button onClick={() => console.log('click')}>Click me</button>;
}
|
| Using Props |
export const Parent = component$(() => {
const userData = useStore({ count: 0 });
return <Child userData={userData} />;
});
interface ChildProps {
userData: { count: number };
}
export const Child = component$<ChildProps>(({ userData }) => {
return (
<>
<button onClick$={() => userData.count++}>Increment</button>
<p>Count: {userData.count}</p>
</>
);
});
|
export const Parent = (() => {
const [ count, setCount ] = useState(0);
const increment = (() => {
setCount(count + 1)
})
return <Child count={count} increment={increment} />;
})
interface ChildProps {
count: number;
increment: () => void;
}
export const Child = ((props: ChildProps) => {
return (
<>
<button onClick={() => props.increment}>Increment</button>
<p>Count: {props.count}</p>
</>
);
})
|
| Declare local state |
export const LocalStateExample = component$(() => {
const count = useSignal(0);
return <div>Value is: {count.value}</div>;
});
|
export function UseStateExample() {
const [value, setValue] = useState(0);
return <div>Value is: {value}</div>;
}
|
| Create a counter component |
export const Counter = component$(() => {
const count = useSignal(0);
return (
<>
<p>Value is: {count.value}</p>
<button onClick$={() => count.value++}>Increment</button>
</>
);
});
|
export function Counter() {
const [count, setCount] = useState(0);
return (
<>
<p>Value is: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</>
);
}
|
| Create a clock that increments every second |
export const Clock = component$(() => {
const seconds = useSignal(0);
useVisibleTask$(({ cleanup }) => {
const interval = setInterval(() => {
seconds.value++;
}, 1000);
cleanup(() => clearInterval(interval));
});
return <p>Seconds: {seconds.value}</p>;
});
|
export function Clock() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds + 1);
}, 1000);
return () => clearInterval(interval);
});
return <p>Seconds: {seconds}</p>;
}
|
| Perform a fetch request every time the state changes |
export const Fetch = component$(() => {
const url = useSignal('https://api.github.com/repos/BuilderIO/qwik');
const responseJson = useSignal(undefined);
useTask$(async ({ track }) => {
track(() => url.value);
const res = await fetch(url.value);
const json = await res.json();
responseJson.value = json;
});
return (
<>
<p>{responseJson.value?.name} has {responseJson.value?.stargazers_count} ✨'s</p>
<input name="url" bind:value={url} />
</>
);
});
|
export function Fetch() {
const [url, setUrl] = useState('https://api.github.com/repos/BuilderIO/qwik');
const [responseJson, setResponseJson] = useState(undefined);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((json) => setResponseJson(json));
}, [url]);
return (
<>
<p>{responseJson?.name} has {responseJson?.stargazers_count} ✨'s</p>
<input name="url" onInput={(ev) => setUrl((ev.target as HTMLInputElement).value)} />
</>
);
}
|
| Declare some context and consume it |
export const MyContext = createContextId('my-context');
export const Parent = component$(() => {
const message = useSignal('some example value');
useContextProvider(MyContext, message);
return (
<>
<Child />
</>
);
});
export const Child = component$(() => {
const message = useContext(MyContext);
return <p>{message.value}</p>;
});
|
export const MyContext = createContext({ message: 'some example value' });
export default function Parent() {
return (
<MyContext.Provider value={{ message: 'updated example value' }}>
<Child />
</MyContext.Provider>
);
}
export const Child = () => {
const value = useContext(MyContext);
return <p>{value.message}</p>;
};
|
| Create a debounced input |
export const DebouncedInput = component$(() => {
const inputText = useSignal('');
const debouncedValue = useSignal('');
useTask$(({ track, cleanup }) => {
track(() => inputText.value);
const debounced = setTimeout(() => {
debouncedValue.value = inputText.value;
}, 1000);
cleanup(() => clearTimeout(debounced));
});
return (
<>
<input bind:value={inputText} />
<p>{debouncedValue.value}</p>
</>
);
});
|
export const DebouncedInput = () => {
const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const debounced = setTimeout(() => setDebouncedValue(value), 1000);
return () => {
clearTimeout(debounced);
};
}, [value]);
return (
<>
<input value={value} onChange={(ev) => setValue((ev.target as HTMLInputElement).value))} />
<p>{debouncedValue}</p>
</>
);
};
|
| Change background color randomly every button click |
export const DynamicBackground = component$(() => {
const red = useSignal(0);
const green = useSignal(0);
const blue = useSignal(0);
return (
<div
style={{
background: `rgb(${red.value}, ${green.value}, ${blue.value})`,
}}
>
<button
onClick$={() => {
red.value = Math.random() * 256;
green.value = Math.random() * 256;
blue.value = Math.random() * 256;
}}
>
Change background
</button>
</div>
);
});
|
export function DynamicBackground() {
const [red, setRed] = useState(0);
const [green, setGreen] = useState(0);
const [blue, setBlue] = useState(0);
return (
<div
style={{
background: `rgb(${red}, ${green}, ${blue})`,
}}
>
<button
onClick={() => {
setRed(Math.random() * 256);
setGreen(Math.random() * 256);
setBlue(Math.random() * 256);
}}
>
Change background
</button>
</div>
);
}
|
| Create a component that renders a list of the presidents |
export const Presidents = component$(() => {
const presidents = [
{ name: 'George Washington', years: '1789-1797' },
{ name: 'John Adams', years: '1797-1801' },
{ name: 'Thomas Jefferson', years: '1801-1809' },
{ name: 'James Madison', years: '1809-1817' },
{ name: 'James Monroe', years: '1817-1825' },
{ name: 'John Quincy Adams', years: '1825-1829' },
{ name: 'Andrew Jackson', years: '1829-1837' },
{ name: 'Martin Van Buren', years: '1837-1841' },
{ name: 'William Henry Harrison', years: '1841-1841' },
{ name: 'John Tyler', years: '1841-1845' },
{ name: 'James K. Polk', years: '1845-1849' },
{ name: 'Zachary Taylor', years: '1849-1850' },
{ name: 'Millard Fillmore', years: '1850-1853' },
{ name: 'Franklin Pierce', years: '1853-1857' },
{ name: 'James Buchanan', years: '1857-1861' },
{ name: 'Abraham Lincoln', years: '1861-1865' },
{ name: 'Andrew Johnson', years: '1865-1869' },
{ name: 'Ulysses S. Grant', years: '1869-1877' },
{ name: 'Rutherford B. Hayes', years: '1877-1881' },
{ name: 'James A. Garfield', years: '1881-1881' },
{ name: 'Chester A. Arthur', years: '1881-1885' },
{ name: 'Grover Cleveland', years: '1885-1889' },
];
return (
<ul>
{presidents.map((president) => (
<li key={president.name + president.years}>
{president.name} ({president.years})
</li>
))}
</ul>
);
});
|
export function Presidents() {
const presidents = [
{ name: 'George Washington', years: '1789-1797' },
{ name: 'John Adams', years: '1797-1801' },
{ name: 'Thomas Jefferson', years: '1801-1809' },
{ name: 'James Madison', years: '1809-1817' },
{ name: 'James Monroe', years: '1817-1825' },
{ name: 'John Quincy Adams', years: '1825-1829' },
{ name: 'Andrew Jackson', years: '1829-1837' },
{ name: 'Martin Van Buren', years: '1837-1841' },
{ name: 'William Henry Harrison', years: '1841-1841' },
{ name: 'John Tyler', years: '1841-1845' },
{ name: 'James K. Polk', years: '1845-1849' },
{ name: 'Zachary Taylor', years: '1849-1850' },
{ name: 'Millard Fillmore', years: '1850-1853' },
{ name: 'Franklin Pierce', years: '1853-1857' },
{ name: 'James Buchanan', years: '1857-1861' },
{ name: 'Abraham Lincoln', years: '1861-1865' },
{ name: 'Andrew Johnson', years: '1865-1869' },
{ name: 'Ulysses S. Grant', years: '1869-1877' },
{ name: 'Rutherford B. Hayes', years: '1877-1881' },
{ name: 'James A. Garfield', years: '1881-1881' },
{ name: 'Chester A. Arthur', years: '1881-1885' },
{ name: 'Grover Cleveland', years: '1885-1889' },
];
return (
<ul>
{presidents.map((president) => (
<li key={president.name + president.years}>
{president.name} ({president.years})
</li>
))}
</ul>
);
}
|