Best way to detect if component is rendered and visible on screen?


What’s the best way to do this? I’ve tried ember-inviewport and also waypoints but neither seems to do what I need…

I also tried this mixin:

but it just seems to fire off as soon as the page is loaded - even for the components that aren’t visible.




If I understood you correctly, then didRender() hook is what you are looking for.

Use it like this in your component:

export default Ember.Component.extend({
  didRender: function() {
    console.log('component has rendered!');


Maybe use this instead of the code in the blog post, as I think that was the original implementation that likely has not been updated to track ember changes.


I did try that. I’ll give it another spin in the morning. Maybe I missed something :confused:


Had another knock at this this morning and it’s working great :smile:


You can use a combination of the Page Visibility API, with this._state === "inDOM" +getBoundingClientRect()` to decide if the component is visible, rendered and inside screen.