React Example for Callbacks

In a React application, you can use callbacks from the @beacon.li/bar package to manipulate the state of your components based on specific events. This allows you to respond to events triggered by Beacon Bar and update your component's state accordingly.

Example: Using Callbacks to Update State

Here's an example of how to use callbacks to update the state of a React component:

import { Beacon } from '@beacon.li/bar';
import { useEffect, useState } from 'react';

function Component() {
    // Initialize a state variable
    const [state, setState] = useState(false);

    useEffect(() => {
        // Define a callback function
        const callback = (userId, metaData) => {
            // Update the state when the callback is triggered
            setState(true);
        };

        // Add the callback with a unique key
        Beacon.addCallback('your_callback_key', callback);

        // Clean up by removing the callback when the component unmounts
        return () => {
            Beacon.removeCallback('your_callback_key');
        };
    }, [setState]);

    // Render your component with the state
    return (
        <div>
            <p>State: {state ? 'True' : 'False'}</p>
        </div>
    );
}

export default Component;

In this example:

• We initialize a state variable called state using useState. This state will be updated when the callback is triggered.

• Inside the useEffect hook, we define a callback function that updates the state to true when it's called.

• We add the callback using Beacon.addCallback('your_callback_key', callback) with a unique key 'your_callback_key'.

• To ensure cleanup when the component unmounts, we return a function that removes the callback using Beacon.removeCallback('your_callback_key').

• Finally, we render the component with the state variable to display the current state.

This example demonstrates how to use callbacks from @beacon.li/bar to manipulate the state of a React component in response to specific events triggered by BeaconBar.