Hooks

Available react hooks. Use it to subscribe to user actions or get application data.

Examples

All variables you can import from @urban-bot/core.

import { useBotContext, useText } from '@urban-bot/core';  

const { useBotContext, useText } = require('@urban-bot/core');  

Navigation

• Common
• useBotContext
• useRouter
• useAnyEvent
• useText
• useCommand
• useImage
• useVideo
• useAudio
• useFile
• useAnimation
• useVoice
• useSticker
• useLocation
• useContact
• usePoll
• useInvoice
• useDice
• useAction

Common

chat

Information about the chat.

required

id: string;
type?: string;
title?: string;
username?: string;
firstName?: string;
lastName?: string;
description?: string;
inviteLink?: string;

function SomeComponent() {
    useText(({ chat }) => {
        console.log('message from chat id', chat.id);
    });

    // ...
}

from

Information about who send the message.

required

id?: string;
isBot?: boolean;
username?: string;
firstName?: string;
lastName?: string;

function SomeComponent() {
    useAnyEvent(({ from }) => {
        console.log('message from user id', from.id);
    });

    // ...
}

nativeEvent

Native event data from the specific messenger.

required

type: string; // 'TELEGRAM' || 'FACEBOOK' || ...
payload?: any;

// facebook bot
function SomeComponent() {
    useImage(({ nativeEvent }) => {
        const senderId = nativeEvent.payload.entry[0].messaging[0].sender.id;
       
        console.log(`Some data from native facebook event ${senderId}`);
    });

    // ...
}

If you use typescript to get the right type pass UrbanBot*Type as generic.

// ...
import { UrbanBotFacebookType } from '@urban-bot/facebook';

function SomeComponent() {
    useImage<UrbanBotFacebookType>(({ nativeEvent }) => {
        const senderId = nativeEvent?.payload?.entry[0].messaging[0].sender.id;
       
        console.log(`Some data from native facebook event ${senderId}`);
    });

    // ...
}

If you develop some messengers you can divide behavior by comparing type.

import { UrbanBotTelegram } from '@urban-bot/telegram';
import { UrbanBotFacebook } from '@urban-bot/facebook';

function SomeComponent() {
    useText(({ nativeEvent }) => {
        if (nativeEvent.type === UrbanBotTelegram.type) {
            console.log('this message from telegram');
        }
        
        if (nativeEvent.type === UrbanBotFacebook.type) {
            console.log('this message from facebook');
        }
    });

    // ...
}

file

The file type of media content from user messages. It is used with useImage, useVideo, etc.

id?: string;
url?: string;
name?: string;
size?: number;
width?: number;
height?: number;
mimeType?: string;
type?: string;
duration?: number;

useBotContext

The main urban bot context. Your component has to be under Root.

function SomeComponent() {
    const context = useBotContext();

    // ...
}

chat

function DisplayChatId() {
    const { chat } = useBotContext();

    return <Text>{chat.id}</Text>;
}

bot

An instance of specific UrbanBot.

UrbanBotTelegram | UrbanBotDiscord | UrbanBotFacebook | UrbanBotSlack

required

function SomeComponent() {
    const { bot: telegramBot } = useBotContext();

    telegramBot.client.kickChatMember(/* ... */);

    // ...
}

If you use typescript to get the right type pass UrbanBot* as generic.

// ...
import { UrbanBotTelegram } from '@urban-bot/telegram';

function SomeComponent() {
    const { bot: telegramBot } = useBotContext<UrbanBotTelegram>();
 
    // client will be with all methods types
    telegramBot.client.kickChatMember(/* ... */);

    // ...
}

If you develop some messengers you can divide behavior by comparing type.

import { UrbanBotTelegram } from '@urban-bot/telegram';
import { UrbanBotSlack } from '@urban-bot/slack';

function SomeComponent() {
    const { bot } = useBotContext();
     
    if (bot.type === UrbanBotTelegram.type) {
        // telegram api
        bot.client.kickChatMember(/* ... */);
    }
    
    if (bot.type === UrbanBotSlack.type) {
        // slack api
        bot.client.conversations.kick(/* ... */);
    }


    // ...
}

isNewMessageEveryRender

The value that is passed to the Root.

optional

function SomeComponent() {
    const { isNewMessageEveryRender } = useBotContext();

    // ...
}

parseMode

The value that is passed to the Root.

optional

function SomeComponent() {
    const { parseMode } = useBotContext();
    
    // ...
}

useRouter

The router context. It works under Router.

function SomeComponent() {
    const routerContext = useRouter();

    // ...
}

navigate

Go to the particular route.

required

Function

function ProfileButtons() {
    const { navigate } = useRouter();

    return (
        <ButtonGroup>
            <Button onClick={() => navigate('catalog')}>Go to Catalog</Button>
        </ButtonGroup>
    );
}

You can pass query as a second argument

function SomeComponent() {
    const { navigate } = useRouter();

    return (
        <ButtonGroup>
            <Button onClick={() => navigate('/user', { id: 123 })}>Go to User</Button>
        </ButtonGroup>
    );
}

activePath

Current route path.

required

string

 function WhereAmI() {
     const { activePath } = useRouter();
 
     return <Text>You are here {activePath}</Text>;
 }

history

History of navigated paths. Maximum of saved paths you can change by historyLength.

required

string[]

 function WhereIHaveBeen() {
     const { history } = useRouter(); // ['/profile', '/bucket', '/order']
 
     return <Text>You have been in {history.join(' ')}</Text>;
 }

params

If a component is under a dynamic path like '/some-path/:id' you can get a variable using params.

optional

{ key: string }

function ComponentWithParams() {
    const { params } = useRouter();

    return <Text>Route id is {params.id}</Text>;
}

If you use typescript you can pass a type .

function ComponentWithParams() {
    const { params } = useRouter<{ id: string }>();

    return <Text>Route id is {params.id}</Text>;
}

query

You can navigate to another route with some additional information navigate('/user', {id: 123}) and can get a variable using query.

optional

{ key: any }

function ComponentWithQuery() {
    const { query } = useRouter();

    return <Text>Route id is {query.id}</Text>;
}

If you use typescript you can pass a type .

function ComponentWithQuery() {
    const { query } = useRouter<{}, { id: number }>();

    return <Text>Route id is {query.id}</Text>;
}

useAnyEvent

Call after any user action.

function SomeComponent() {
    useAnyEvent((event) => {
        console.log('user made something');
    });

    // ...
}

type

Event type.

required

'text' | 'command' | 'sticker' | 'animation' | 'audio' | 'contact' | 'file' | 'invoice' | 'location' | 'image' | 'poll' | 'dice' | 'voice' | 'action' | 'video'

function SomeComponent() {
    useAnyEvent(({ type }) => {
        console.log('event type', type);
    });

    // ...
}

payload

Payload depending on the event type.

optional

function SomeComponent() {
    useAnyEvent(({ type, payload }) => {
        if (type === 'text') {
            console.log(payload.text);
        }

        if (type === 'location') {
            console.log(payload.latitude);
        }
    });

    // ...
}

chat

from

nativeEvent

useText

Call after a user sends a text.

function SomeComponent() {
    useText((event) => {
        console.log('user sent a text');
    });

    // ...
}

You can subscribe to a specific text.

string | RexExp

function SomeComponent() {
    useText((event) => {
        console.log('user sent "hello"');
    }, 'hello');

    // ...
}

Or subscribe to several values.

(string | RexExp)[]

function SomeComponent() {
    useText((event) => {
        console.log('user greeted');
    }, ['hi', /hello/]);

    // ...
}

text

A text which a user sent.

required

string

function SomeComponent() {
    const [answer, setAnswer] = React.useState('Welcome to Urban Bot!');

    useText(({ text }) => {
        if (text === 'hello') {
            setAnswer('How can I help you?');
        }

        if (text === 'good buy') {
            setAnswer('See you soon');
        }
    });

    return <Text>{answer}</Text>;
}

chat

from

nativeEvent

useCommand

/command

Call after a user sends a command. A command usually is a text with a prefix slash.

function SomeComponent() {
    useCommand((event) => {
        console.log('user sent a command');
    });

    // ...
}

You can subscribe to a specific command.

string | RexExp

function SomeComponent() {
    const [name, setName] = React.useState();

    useCommand((event) => {
        setName(event.argument)
    }, '/setName');

    // ...
}

Or subscribe to several values.

(string | RexExp)[]

function SomeComponent() {
    useCommand((event) => {
        console.log('user wants to set name');
    }, ['/setFirstName', '/setLastName']);

    // ...
}

command

A command which a user sent.

required

string

function SomeComponent() {
    useCommand(({ command }) => {
        console.log(`user sent a command ${command}`);
    });

    // ...
}

argument

An additional text after a command. If a user writes /sayMyName Heisenberg, command is /sayMyName, argument is Heisenberg.

optional

string

function SomeComponent() {
    useCommand(({ command, argument }) => {
        if (command === '/sayMyName') {
            console.log(argument);
        }
    });

    // ...
}

chat

from

nativeEvent

useImage

Call after a user sends an image or images.

function SomeComponent() {
    useImage((event) => {
        console.log('user sent an image');
    });

    // ...
}

files

Images which a user sent.

required

file[]

function SomeComponent() {
    useImage(({ files }) => {
        const { id } = files[0];
    
        console.log('user sent a image with id', id);
    });

    // ...
}

chat

from

nativeEvent

useVideo

Call after a user sends a video or videos.

function SomeComponent() {
    useVideo((event) => {
        console.log('user sent a video');
    });

    // ...
}

files

Videos which a user sent.

required

file[]

function SomeComponent() {
    useVideo(({ files }) => {
        const { id } = files[0];
    
        console.log('user sent a video with id', id);
    });

    // ...
}

chat

from

nativeEvent

useAudio

Call after a user sends an audio or audios.

function SomeComponent() {
    useAudio((event) => {
        console.log('user sent an audio');
    });

    // ...
}

files

Audios which a user sent.

required

file[]

function SomeComponent() {
    useAudio(({ files }) => {
        const { id } = files[0];
    
        console.log('user sent an audio with id', id);
    });

    // ...
}

chat

from

nativeEvent

useFile

Call after a user sends a file or files.

function SomeComponent() {
    useFile((event) => {
        console.log('user sent a file');
    });

    // ...
}

files

Files which a user sent.

required

file[]

function SomeComponent() {
    useFile(({ files }) => {
        const { id } = files[0];
    
        console.log('user sent a file with id', id);
    });

    // ...
}

chat

from

nativeEvent

useAnimation

Call after a user sends an animation.

function SomeComponent() {
    useAnimation((event) => {
        console.log('user sent an animation');
    });

    // ...
}

name

An animation name.

optional

string

function SomeComponent() {
    useAnimation(({ name }) => {
        console.log(`user sent an animation with name ${name}`);
    });

    // ...
}

duration

An animation duration.

optional

number

id

An animation id.

optional

string

mimeType

An animation mimeType.

optional

string

chat

from

nativeEvent

useVoice

Call after a user sends a voice.

function SomeComponent() {
    useVoice((event) => {
        console.log('user sent a voice');
    });

    // ...
}

id

A voice id.

optional

string

function SomeComponent() {
    useVoice(({ id }) => {
        console.log(`user sent voice with id ${id}`);
    });

    // ...
}

duration

A voice duration.

optional

number

mimeType

A voice mimeType.

optional

string

chat

from

nativeEvent

useSticker

Call after a user sends a sticker.

function SomeComponent() {
    useSticker((event) => {
        console.log('user sent a sticker');
    });

    // ...
}

emoji

An emoji which is connected with a sticker.

optional

string

function SomeComponent() {
    useSticker(({ emoji }) => {
        console.log(`user sent a sticker ${emoji}`);
    });

    // ...
}

name

A sticker name.

optional

string

id

A sticker id.

optional

string

width

A sticker width.

optional

number

height

A sticker height.

optional

number

chat

from

nativeEvent

useLocation

Call after a user sends a location.

function SomeComponent() {
    useLocation((event) => {
        console.log('user sent a location');
    });

    // ...
}

latitude

required

number

longitude

required

number

function SomeComponent() {
    useLocation(({ latitude, longitude }) => {
        console.log(`user sent a coordinate ${latitude} ${longitude}`);
    });

    // ...
}

chat

from

nativeEvent

useContact

Call after a user sends a contact.

function SomeComponent() {
    useContact((event) => {
        console.log('user sent a contact');
    });

    // ...
}

phoneNumber

A contact phoneNumber.

optional

string

function SomeComponent() {
    useContact(({ phoneNumber }) => {
        console.log(`user sent a phone number ${phoneNumber}`);
    });

    // ...
}

firstName

A contact firstName.

optional

string

lastName

A contact lastName.

optional

string

userId

A contact id.

optional

string | number

chat

from

nativeEvent

usePoll

Call after a user sends a poll.

function SomeComponent() {
    usePoll((event) => {
        console.log('user sent a poll');
    });

    // ...
}

question

A poll question.

required

string

function SomeComponent() {
    usePoll(({ question }) => {
        console.log(`user ask a question ${question}`);
    });

    // ...
}

options

A poll options.

required

option[]

function SomeComponent() {
    usePoll(({ options }) => {
        options.forEach((option) => {
            console.log(`you can choose ${option.text}`);
        });
    });

    // ...
}

id

A poll id.

optional

string | number

chat

from

nativeEvent

Option

text: string;
id?: string | number; 
count?: number;

useInvoice

Call after a user sends an invoice.

function SomeComponent() {
    useInvoice((event) => {
        console.log('user sent an invoice');
    });

    // ...
}

totalAmount

An invoice totalAmount.

required

number

function Billing() {
    useInvoice(({ totalAmount }) => {
        console.log(`user sent an invoice with ${totalAmount}`);
    });

    // ...
}

title

An invoice title.

optional

string

description

An invoice description.

optional

string

startParameter

An invoice startParameter.

optional

string

currency

An invoice currency.

optional

string

chat

from

nativeEvent

useDice

Call after a user sends a random value.

function SomeComponent() {
    useDice((event) => {
        console.log('user sent an random value');
    });

    // ...
}

value

A random value.

required

number

function SomeComponent() {
    useDice(({ value }) => {
        console.log(`user sent a random value ${value}`);
    });

    // ...
}

chat

from

nativeEvent

useAction

Call after a user makes some action, for example, click a button.

function SomeComponent() {
    useAction((event) => {
        console.log('user made some action');
    });

    // ...
}

actionId

An action id.

required

string

function SomeComponent() {
    useAction(({ actionId }) => {
        console.log(`user made action ${actionId}`);
    });

    // ...
}

chat

from

nativeEvent