> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.helixo.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# BUCKS Event-Specific Documentation for Currency Switch

### **Purpose**
This documentation explains the details of the Bucks Currency Converter’s custom emitted event for currency change in the switcher. From this event we can get the selected currency by listening to this event. Additionally, this event emitter works across different scenarios, such as page load and page switch.

### **Scope**
This works only if the Bucks app is present in the store.

### **Step-by-Step Guide**
Follow these steps to listen for and handle the `BUCKS_SELECTED_CURRENCY` custom event:

1. **Add an Event Listener**
    
    Register an event listener for the `BUCKS_SELECTED_CURRENCY` custom event on the `window` object.
    
```jsx
    document.addEventListener('BUCKS_SELECTED_CURRENCY', (event) => {
        const selectedCurrency = event.detail;
        console.log('Selected currency:', selectedCurrency);
        // Perform additional actions with the selected currency
    });
```
    
2. **Handle the Event Data**
    
    The `event.detail` property contains the currently selected currency. Use this data to implement your desired functionality, such as updating the UI or making an API call.
    
3. **Remove the Event Listener (Optional)**
    
    If you no longer need to listen to the event (e.g., when a certain component or page is destroyed), remove the event listener to avoid potential memory leaks:
    
```jsx
    document.removeEventListener('BUCKS_SELECTED_CURRENCY', yourHandlerFunction);
```
    
4. **Verify the Integration**
* Test the functionality by interacting with the currency selector.
* Confirm that the event listener logs the selected currency or performs the desired action.
* Additionally, ensure the event listener works as expected during **page load** and **page switch** scenarios. Test for cases where the page reloads or transitions to verify that the selected currency is accurately logged or handled after the event emitter is triggered.

### **Technical Notes**
* **Trigger Condition**: The `BUCKS_SELECTED_CURRENCY` event is dispatched automatically in the page load, when the user clicks on a currency in the currency selector and when the user switches the pages.
* **Event Payload**: The `detail` object in the event contains the selected currency and can be accessed via `event.detail`.
* **Important**: Ensure the event listener is added before any interaction with the currency selector occurs to avoid missing the event.

```
Hope you've got some value from this article. 

Let us know your feedback 🙂 We are excited to hear your thoughts. 🙂
```