Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions docs/src/pages/blog/anywidget-02.md
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,31 @@ export default { render };
> Note: The above front-end code requires transformation with tool like
> `esbuild` to allow for the special JSX syntax (e.g., `<App />`).

Another common scenario requiring proper cleanup is when using
`requestAnimationFrame` to continually redraw into a canvas:

```javascript
export default {
render({ model, el }) {
const canvasEl = document.createElement("canvas");
let requestId = requestAnimationFrame(step);

function step() {
/* ...custom rendering goes here... */
requestId = requestAnimationFrame(step);
}
el.appendChild(canvasEl);

return () => {
cancelAnimationFrame(requestId);
};
},
};
```

This prevents the accumulation of several animation loops executing at the same
time after re-running the cell a bunch of times.

## Getting Started

To start using **anywidget** v0.2, upgrade your package using pip:
Expand Down