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.

Installation

``bash
$ yarn add react-channel-plugin
`

Getting started

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 (

Open

);
};
`

API

React provider and hooks for Channel IO API.

$3

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.
*
* - Default: false
*/
autoBoot?: boolean;

/**
* Timeout before call boot.
* Only work when autoBoot set as true.
*
* - Default: 1000
*/
autoBootTimeout?: number;

/**
* Need to reboot channel plugin when boot option changed?
*
* - Default: true
*/
rebootOnOptionChanged?: boolean;

/**
* Since ChannelIO does not support customLauncherSelector after plugin booted,
* add onClick event listener at element which has customLauncherSelector
* whenever DOM tree mutated. (observed by MutationObserver)
*
* - Default: true
*/
useCustomLauncherSelectorTweak?: boolean;

/**
* Print debug logs via console.debug.
* Set false 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 (
pluginKey={CHANNEL_ID_PLUGIN_KEY}
language="en"
profile={userProfile}
autoBoot
autoBootTimeout={2000}
>
Child component of the ReactChannelIO

);
};
`

$3

Provides API of Channel IO as React hook. Please refer official docs to see detail description of each API.

- boot
- shutdown
- 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 (
<>

Open


onClick={() => {
updateUser({
profile: {
name: 'John Doe',
email: 'john.doe@example.com',
mobileNumber: '+821012345678',
},
});
}}
>
Update user


);
};
`

$3

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.


- onShowMessenger
- onHideMessenger
- 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

Playground for react-channel-plugin.

https://ukjinjang.github.io/react-channel-plugin

Unit Test

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 (
children={children}
pluginKey={CHANNEL_ID_PLUGIN_KEY}
{...pluginProps}
/>
);
},
});
`

Brower compatibility

| Browser (last 2 versions) | |
| ------------------------- | ---- |
| Google Chrome | ✅ |
| MS Edge (Chromium) | ✅ |
| Mozilla Firefox | ✅ |
| Electron | ✅ |

Issues

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.