PricingBlog

Where to find events from an exported component?

  • uunicode-1482439235058401361

    unicodes

    2 hours ago

    I just built a component and exported it. How can I communicate information to the outside when something happens inside the component? Is there a way to catch the events that the component creates?
  • bsr.24-1482459273064743084

    Bobby Randhawa

    1hour ago

    So when you export a component from Nordcraft, any action events you set up on it become regular DOM CustomEvents. You can just listen for them like any other event.

    Say your component has an action event called "Something happened" — from the outside you'd just do:

    const myComponent = document.querySelector("my-component");

    myComponent.addEventListener("Something happened", (event) => {
    console.log(event.detail); // whatever data you passed with the event
    });


    The event.detail will have whatever data you attached to the action event inside Nordcraft.

    One thing to watch out for, if you're creating/destroying the component dynamically, make sure you clean up your listeners with removeEventListener when you're done, otherwise you can get memory leaks.

    Basically Nordcraft just uses the standard browser custom events API under the hood, nothing proprietary. Action event name in Nordcraft = event name you listen for outside.
    ❤️1
  • uunicode-1482460458597355613

    unicodes

    58 minutes ago

    Thank you, Bobby! You’re right, I was looking for something in the right menu under "events". Really appreciate the clarification. 🙏
  • bsr.24-1482461337555566762

    Bobby Randhawa

    54 minutes ago

    No worries!