Channel IO plugin wrapper for React
npm install react-channel-plugin![]()
!npm






!npm-download
!license
Channel IO (Channel Talk) plugin wrapper for React.
> If you want to use Channel IO plugin without React, please refer channel-web-sdk-loader.
``bash`
$ yarn add react-channel-plugin
Example code of react channel plugin.
`tsx
import React from 'react';
import {
ReactChannelIO,
useChannelIOApi,
useChannelIOEvent,
} from 'react-channel-plugin';
import { CHANNEL_ID_PLUGIN_KEY } from './config';
const App = () => {
return (
);
};
const AppPage = () => {
const { showMessenger } = useChannelIOApi();
useChannelIOEvent('onShowMessenger', () => {
console.log('Messenger opened!');
});
return (
);
};
`
React provider and hooks for Channel IO API.
is React Context provider, which will provides context (APIs and event listeners) to react-channel-plugin hooks. Also it receives Channel IO plugin options and initialize Channel IO instance. Make sure place upper than hooks used at your app.
#### Props
`tsx
/**
* Please refer ChannelIO offical docs.
* - ref: https://developers.channel.io/docs/web-boot-option
*/
type ChannelIOBootOption = {};
interface ReactChannelIOProps extends ChannelIOBootOption {
/**
* Indicates whether ChannelIO should be automatically booted or not.
* If true no need to call boot manually.false
*
* - Default:
*/
autoBoot?: boolean;
/**
* Timeout before call boot.autoBoot
* Only work when set as true.1000
*
* - Default:
*/
autoBootTimeout?: number;
/**
* Need to reboot channel plugin when boot option changed?
*
* - Default: true
*/
rebootOnOptionChanged?: boolean;
/**
* Since ChannelIO does not support customLauncherSelector after plugin booted,customLauncherSelector
* add onClick event listener at element which has MutationObserver
* whenever DOM tree mutated. (observed by )true
*
* - Default:
*/
useCustomLauncherSelectorTweak?: boolean;
/**
* Print debug logs via console.debug.false
* Set when use plugin at production env.
*/
verbose?: boolean;
/**
* Emitted when channel plugin booted.
*/
onBoot?: (err?: any, user?: ChannelIOUser) => void;
}
`
#### Example
`tsx
import React from 'react';
import { ReactChannelIO } from 'react-channel-plugin';
import { CHANNEL_ID_PLUGIN_KEY } from './config';
const App = () => {
const userProfile = { ... };
return (
language="en"
profile={userProfile}
autoBoot
autoBootTimeout={2000}
>
Child component of the ReactChannelIO
);
};
`
Provides API of Channel IO as React hook. Please refer official docs to see detail description of each API.
- bootshutdown
- showMessenger
- hideMessenger
- openChat
- openSupportBot
- track
- clearCallbacks
- updateUser
- addTags
- removeTags
- setPage
- resetPage
- showChannelButton
- hideChannelButton
- setAppearance
-
#### Example
`tsx
import { useChannelIOApi } from 'react-channel-plugin';
const AppPage = () => {
const { showMessenger, updateUser } = useChannelIOApi();
return (
<>
onClick={() => {
updateUser({
profile: {
name: 'John Doe',
email: 'john.doe@example.com',
mobileNumber: '+821012345678',
},
});
}}
>
Update user
>
);
};
`
Provides event callbacks from Channel IO as React hook. Provide callback method name as first parameter of hook method. Please refer official docs to see detail description of each callback.
- onShowMessengeronHideMessenger
- onBadgeChanged
- onChatCreated
- onFollowUpChanged
- onUrlClicked
-
#### Example
`tsx
import { useChannelIOApi } from 'react-channel-plugin';
const AppPage = () => {
useChannelIOEvent('onShowMessenger', () => {
console.log('messenger opened!');
});
useChannelIOEvent('onFollowUpChanged', profile => {
console.log('profile updated:', profile);
});
return null;
};
`
Playground for react-channel-plugin.
https://ukjinjang.github.io/react-channel-plugin
To run unit test components that use react-channel plugin's hook with react-testing-library, pass ReactChannelIO provider to wrapper option of render method.
`tsx
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react';
// ...
render(
wrapper: ({ children }) => {
return (
pluginKey={CHANNEL_ID_PLUGIN_KEY}
{...pluginProps}
/>
);
},
});
`
| Browser (last 2 versions) | |
| ------------------------- | ---- |
| Google Chrome | ✅ |
| MS Edge (Chromium) | ✅ |
| Mozilla Firefox | ✅ |
| Electron | ✅ |
react-channel-plugin` is a light-weight wrapper of Channel IO JavaScript SDK. Because of this, the issue you're having likely isn't a react-channel-plugin issue, but an issue with Channel IO service itself. So please check it again, before submit new issue.