React TalkBot

Convey your message to your users through displaying a beautiful animation. Visit the repo here.

Installation

$ npm i react-talkbot

Usage

    import { TalkBox } from 'react-talkbot';

    const msgDemo = [
        {
            sent: false,
            msg: "Hi, How can I build an impressive resume?",
        },
        {
            sent: true,
            msg: "Hello, Do you have a good Github Profile?",
        },
        {
            sent: false,
            msg: "Yeah, I do have one. All of my projects are on Github.",
        },
        {
            sent: true,
            msg:
            "Cool, You can head over to <a href='https://resume-github.vercel.app' style='color: #74c'>https://resume-github.vercel.app</a> and generate a resume with your username.",
        },
        {
            sent: false,
            msg: "Ohh, wow! I'll check it out.",
        },
        {
            sent: true,
            msg: "and the best part is you can customize it too.",
        },
        {
            sent: false,
            msg: "Great, Thanks buddy :)",
        },
    ];

    const App = () => {
        return (
            <div>
                // some code here
                <TalkBox
                    messages={messages}
                    senderAvatar={"🧑🏻"}
                    receiverAvatar={"👨🏻‍💻"}
                    containerStyle={{background: "antiquewhite", borderColor: "gainsboro"}}
                    msgWrapperStyle={{borderRadius: "24px"}}
                />
            </div>
        )
    }

API and Configuration

| Property | Type | Default | Description | | --------------- | ------------------ | --------------------- | --------------------- | | messages | Array | some messages | An array of objects where an object has two properties: sent - Boolean(true when message is shown on right side as if one sent it) msg - String(text which would be displayed, could also contain HTML tags, those will be parsed.) | | senderAvatar | Text(any emoticon) | 🧑🏻 | An emoticon to display as sender profile| | receiverAvatar | Text(any emoticon) | 👨🏻‍💻 | An emoticon to display as receiver profile| | containerStyle | Object | | These styles would be applied to the container/screen on the back-side| | msgWrapperStyle | Object | | These styles would be applied to single message div on which text is displayed| | sentMsgWrapperStyle | Object | | These styles would be applied to message div displayed on sent end| | receivedMsgWrapperStyle | Object | | These styles would be applied to message div displayed on received end|