---slug: /guides/video/using-events-in-react-and-react-nativesidebar_position: 12sidebar_label: Using Events---import Tabs from @theme/Tabs;import TabItem from @theme/TabItem;# Using Events in React and React NativeThis article follows either from [Getting Started with Video API in React](../getting-started-video-api-react/index.mdx) or [Getting Started with Video API in React Native](../getting-started-video-api-react-native/index.mdx).If you havent got a project set up already, you should start there.:::tipThe following article describes how you would use RoomSession events with React or React Native. However, most of thislogic is already abstracted into React hooks and is available in the @signalwire-community/react package, so itwill be a good idea to check out the [Using Hooks to Track Call State](../using-hooks-to-track-call-state/index.mdx) articlefirst.:::### Interacting with the RoomSession ObjectThe component emits an onRoomReady event with reference to the [RoomSession object](docs/sdks/reference/browser-sdk/video/video-roomsession.mdx). Use this to control nearly every aspect of the video call session in progress.First, let’s add a button to make it possible to leave the room.jsx title=App.jsimport { useCallback, useState } from react;import { Video } from @signalwire-community/react;const TOKEN = ;export default function DemoVideo() { const [roomSession, setRoomSession] = useState(null); const onRoomReady = useCallback((rs) => setRoomSession(rs), []); return (
);}jsx title=App.jsimport { useState } from react;import { SafeAreaView, Button } from react-native;import { Video } from @signalwire-community/react-native;const TOKEN = ;export default function App() { const [roomSession, setRoomSession] = useState(null); const onRoomReady = useCallback((rs) => setRoomSession(rs), []); return ( );}In a similar way, we can add more buttons for more controls.jsxScreenshot of the application after buttons have been added.jsxThis leaves us with a basic set of controls for the video call. However, there’s no awareness of the current state in this UI. For example, the audio might already be muted, in which case we want to disable or hide the “Mute Audio” button.RoomSession gives us that information with events, which you can subscribe to to stay updated about the happeningsin the room, the comings and goings of members, etc.To learn more about what you can do using the [RoomSession](docs/sdks/reference/browser-sdk/video/video-roomsession.mdx), the [reference section](docs/sdks/reference/browser-sdk/video/index.mdx) is a great place to start.### RoomSession EventsThe RoomSession object has a host of [events](docs/sdks/reference/browser-sdk/video/video-roomsession.mdx#events). These are callback functions that you register before joining the room, which will be called when those events happen. Register events for anything from if someone starts recording the call, to when someone starts talking.This also means that there are events we can subscribe to for when a [member’s state changes](docs/sdks/reference/browser-sdk/video/video-roomsession.mdx#memberupdated). So we can keep track of whether the user is muted or not, and display the corresponding button to be clicked.The React component proxies each RoomSession event with a handler prop. To register for a member.updated event, you would pass the handler function as the prop onMemberUpdated in the same way we did onRoomReady in the example above (onRoomReady is not a RoomSession event, however). For example:jsx
.default})
