Skip to content
This repository has been archived by the owner on Oct 30, 2023. It is now read-only.

Commit

Permalink
docs: add migration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
owenpearson committed Aug 29, 2023
1 parent c589f46 commit 57220c9
Showing 1 changed file with 46 additions and 0 deletions.
46 changes: 46 additions & 0 deletions UPDATING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Upgrade / Migration Guide

## Version 2.x to 3.x

### Replacing `configureAbly` with `AblyProvider`

In versions 1 and 2 of our react-hooks, we exported a function called `configureAbly` which was used to register an Ably client instance to global state.
This caused a few issues (most notably it made the hooks difficult to use with hot module reloading), so we have replaced the global configuration function with a context provider (`AblyProvider`)
The simplest way to use the context provider is to create your own ably-js client outside and then pass it as a prop to the `AblyProvider`.
All child components of the `AblyProvider` will then be able to use the hooks, making use of the provided Ably client instance. For this reason, we recommend putting the `AblyProvider` high up in your component tree, surrounding all components which may need to use Ably hooks.

For example, replace this:
```jsx
configureAbly(options);
```

With this:
```jsx
const client = new Ably.Realtime.Promise(options);

return <AblyProvider client={ably}>
{children}
</AblyProvider>
```

You may also provide the client options directly to the `AblyProvider` so that the client is created automatically. If you use this prop the client will be automatically closed when the `AblyProvider` is unmounted.

```jsx
return <AblyProvider options={options}>
{children}
</AblyProvider>
```

If you were already using multiple Ably clients in the same react application, you may pass in an optional `id` prop to the provider, which you can then pass to the hooks to specify which Ably client instance the hook should use:
```jsx
const client = new Ably.Realtime.Promise(options);

return <AblyProvider client={ably} id="foo">
{children}
</AblyProvider>

// in a child component:
useChannel({channelName: 'my_channel', id: 'foo'}, (msg) => {
console.log(msg);
});
```

0 comments on commit 57220c9

Please sign in to comment.