This repository has been archived by the owner on Oct 30, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c589f46
commit 57220c9
Showing
1 changed file
with
46 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
}); | ||
``` |