Realtime in React

1import { Realtime } from "ably";
2import { AblyProvider, useChannel } from "ably/react";
3
4function App() {
5  const client = new Realtime({ authUrl: "[YOUR_ABLY_AUTH_URL]" });
6  return (
7    <AblyProvider client={client}>
8      <Messages />
9    </AblyProvider>
10  );
11}
12function Messages() {
13  const { channel } = useChannel("inbound-messages", (message) => {
14    console.log(message);
15  });
16  return (
17    <>
18    <div>Open browser tools console to view incoming Ably messages</div>
19    <button onClick={() => {channel.publish('greeting','hello')}}>Publish</button>
20    </>
21  );
22}
23export default App;