Workspace settings
Manage your team and preferences here.
{profile.name}
Loading profile…
); return () => root.unmount(); }, }, content: async ({ signal }) => { const response = await fetch("/api/profile", { signal }); if (!response.ok) throw new Error("Profile request failed"); const profile = await response.json(); return { render(container) { const root = createRoot(container); root.render(
Discover. Create. Keep moving.
`;
featureFlow.highlight({
target: "dashboard",
title: "Your command center",
content,
});
```
Add the animation in your application stylesheet. DOM nodes are cloned before insertion. Use trusted application-authored markup only.
## Upgrading to 2.0
The factory is now named `helper`. Replace imports and calls to
`createFeatureFlow` with `helper`; the old factory name is no longer exported.
Version 2.0 also adds automatic arrow placement, asynchronous content loaders,
interactive templates, and the `showCloseButton` / `hideActionButton` flags.
## React usage
### Close icon, hidden action button, and interactive parent content
Set `showCloseButton: true` to add an accessible close icon and
`hideActionButton: true` to remove the primary Got it/Dismiss/Next/Finish button.
Both default to `false` and work on `highlight()` options and individual tour steps.
The close icon stops the helper without marking the tour completed or skipped.
Back, Skip, and Don't show me again controls are unaffected.
Use `content: { render(container) { ... } }` for interactive application content.
Plain DOM nodes are cloned, so their event listeners are not retained. A render
template mounts live content and returns cleanup that runs when the popup closes.
```jsx
import { useEffect, useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import { helper } from "ngx-helper";
import "ngx-helper/styles.css";
function CopyContent({ text }) {
const [status, setStatus] = useState("");
async function copy() {
try {
await navigator.clipboard.writeText(text);
setStatus("Copied!");
} catch {
setStatus("Could not copy. Please select and copy the text manually.");
}
}
return (
{text}{" "}
);
}
export default function CopyHelp({ text }) {
const flowRef = useRef(null);
useEffect(() => {
const flow = helper({ storage: false });
flowRef.current = flow;
return () => { flow.destroy(); flowRef.current = null; };
}, []);
function open(event) {
void flowRef.current?.highlight({
target: event.currentTarget,
tone: "default",
showCloseButton: true,
hideActionButton: true,
overlay: false,
spotlight: false,
content: {
render(container) {
const root = createRoot(container);
root.render({status}