react-viber-bot

scan qr code bellow for live demo in your viber app:

With react-viber-bot you can write bot for viber app (using viber rest api) with react library.

First of all you need register webhook here

Demo video: viber-bot.webm

Install

npm install react-viber

or

yarn add react-viber

Usage

Contents

• Getting Started
• Hooks
  • useServerState
  • useServerTimeout
  • useServerQuery
  • useServerMutation

Getting Started

In this example used express.js so, first of all install express.js and all dependencies. After that, add callback for your web hook:

// index.ts
import {renderToStringAsync} from 'react-viber-bot';
import {App} from 'app.component';
...
expressApp.post("/web_hook", async (req,res) => {
	const {status, message} = await renderToStringAsync(<App />, req);
	res.status(status).send(message);
});

// app.component.tsx
export const App = (): JSX.Element => {
	const { message_request } = useViberRequest();
	return (
		<ViberMessage
			receiver={message_request.sender}
			text='Hello world'
		/>
	);
};

Result in your viber app:

Hooks

useServerState

const [message, setMessage] = useServerState('message', '');

export const Example = (): JSX.Element => {
	const [message, setMessage] = useServerState('message', '');

	const { message_request } = useViberRequest();
	if (!message_request) {
		return <></>;
	}
	return (
		<ViberTextMessage
			receiver={message_request.sender}
			text={message}
			keyboard={
				<ViberKeyboard
					Buttons={
							<Button
								name={"button_server_state"}
								Text="Server state example"
								ActionType='reply'
								Columns={3}
								Rows={1}
								onClick={() => {
									setMessage('hello world');
								}}
							/>
					}
				/>
			}
		/>
	);
};

useServerTimeout

const {callback} = useServerTimeout('callback', () => console.log('hello world), 1000);

export const Example = (): JSX.Element => {
	const {callback} = useServerTimeout('callback', () => console.log('hello world), 1000);

	const { message_request } = useViberRequest();
	if (!message_request) {
		return <></>;
	}
	return (
		<ViberTextMessage
			receiver={message_request.sender}
			text={message}
			keyboard={
				<ViberKeyboard
					Buttons={
							<Button
								name={"button_timeout"}
								Text="Timeout example"
								ActionType='reply'
								Columns={3}
								Rows={1}
								onClick={callback}
							/>
					}
				/>
			}
		/>
	);
};

useServerQuery

const {data} = useServerQuery('query', () => axios.get('https://cat-fact.herokuapp.com/facts/'));

export const Example = (): JSX.Element => {
	const {data} = useServerQuery('query', () => axios.get('https://cat-fact.herokuapp.com/facts/'));

	const { message_request } = useViberRequest();
	if (!message_request) {
		return <></>;
	}
	return (
		<ViberTextMessage
			receiver={message_request.sender}
			text={data}
		/>
	);
};

useServerMutation

const {mutate} = useServerMutation('mutation', (data) => axios.post('https://cat-fact.herokuapp.com/facts/', data));

export const Example = (): JSX.Element => {
	const {mutate} = useServerMutation('mutation', () => axios.get('https://cat-fact.herokuapp.com/facts/'));

	const { message_request } = useViberRequest();
	if (!message_request) {
		return <></>;
	}
	return (
		<ViberTextMessage
			receiver={message_request.sender}
			text={data}
			keyboard={
				<ViberKeyboard
					Buttons={
							<Button
								name={"button_mutate"}
								Text="Mutation example"
								ActionType='reply'
								Columns={3}
								Rows={1}
								onClick={mutate}
							/>
					}
				/>
			}
		/>
	);
};

Screenshots: