Using CitySpark Widgets with React and Other Dynamic Frameworks
CitySpark portal widgets are fully compatible with websites that dynamically load content, including those built with frameworks like React. The script can be added at any point in the page lifecycle and will function correctly when loaded dynamically.
Common Issue: Widget Re-Rendering
In some cases, after the calendar widget has rendered, the JavaScript framework may remove it from the page or re-run the script. This typically occurs when the framework re-renders dynamic HTML and inserts it into the DOM multiple times.
Recommended Solution (React)
If you are using React, we recommend wrapping the CitySpark widget in a dedicated component and preventing unnecessary re-renders.
You can do this by implementing shouldComponentUpdate and returning false:
shouldComponentUpdate() {
return false;
}This ensures the widget is only initialized once, preventing it from being removed and reloaded. It also improves overall page performance.
Console Messages
If the widget is removed and re-rendered multiple times, a message will appear in the browser console. This is expected behavior and serves as a warning about potential performance impacts.
Despite these warnings, the widget will continue to function correctly for end users.