| | |
| | | }) |
| | | ``` |
| | | |
| | | You can also add the equivalent of a `beforeunload` event for [[SPA Routing]] via the `prenav` event. |
| | | |
| | | ```ts |
| | | document.addEventListener("prenav", () => { |
| | | // executed after an SPA navigation is triggered but |
| | | // before the page is replaced |
| | | // one usage pattern is to store things in sessionStorage |
| | | // in the prenav and then conditionally load then in the consequent |
| | | // nav |
| | | }) |
| | | ``` |
| | | |
| | | It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks. |
| | | This will get called on page navigation. |
| | | |
| | |
| | | As Quartz components are just functions that return React components, you can compositionally use them in other Quartz components. |
| | | |
| | | ```tsx title="quartz/components/AnotherComponent.tsx" |
| | | import YourComponent from "./YourComponent" |
| | | import YourComponentConstructor from "./YourComponent" |
| | | |
| | | export default (() => { |
| | | const YourComponent = YourComponentConstructor() |
| | | |
| | | function AnotherComponent(props: QuartzComponentProps) { |
| | | return ( |
| | | <div> |