Usage
Reactivity
Update the user interface, statically or dynamically, after generation.
The useSyntux hook allows you to modify the user interface after it has been generated.
Change the value (static)
If you simply want to update the value to display, and keep the user interface.
The following example adds an item to the value array with setValue:
"use client";
import { useSyntux } from 'getsyntux/client';
export default function CustomComponent() {
const { value, setValue } = useSyntux();
return (
<button
onClick={() => {
const newArr = [...value];
newArr.push({ ... });
setValue(newArr);
}}
>
Add value
</button>
);
}Regenerate the UI (dynamic)
First, ensure you have exposed an update endpoint during installation.
Assign rerenderEndpoint
Provide the URL of the rerender endpoint through the rerenderEndpoint prop:
<GeneratedUI
endpoint="/api/syntux"
rerenderEndpoint="/api/syntux/rerender" /* <-- over here */
value={value}
hint="display as a profile card"
/>Call setValue
Finally, in order to trigger a regeneration, provide options to setValue like so:
"use client";
export default function CustomComponent() {
const { value, setValue } = useSyntux();
return (
<button
onClick={() => {
setValue(value, {
regenerate: true, // if false, treated as static
hint: "Change the style to be more..."
})
}}
>
Update UI!
</button>
);
}A new UI will then be streamed when the button is clicked.