react-firebase-chat

Getting Started with React Firebase Chat

Basic setup

Start by setting up Firebase in your React project

Once Firebase is set up and initialized, import the following modules

import {
  ChatProvider,
  ChatWindow,
} from "react-firebase-chat"

We then need to provide a theme file, we'll create a file containing the following as a starting point. Feel free to customize this to suit your needs.

//chatTheme.js

import { css } from 'styled-components'
import { keyframes } from 'styled-components'

const isTypingAnim = keyframes`
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
`

export const accent = "#18b583"
// export const accent = "purple"

const scrollbar = css`
    &::-webkit-scrollbar {
        width: 12px;
    }
    
    &::-webkit-scrollbar-track {
        background: #333;
    }
    
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #555;
    }
`

const dropShadow = css`
    box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.1);
`

const emojiTheme = {
    EmojiButton: css`
        outline: none;
        border: none;
        background: ${accent};
        color: white;
        padding: 0 1rem;
        cursor: pointer;
        position: relative;
    `,

    EmojiWrapper: css`
        height: 500px;
        width: 300px;
        background: #333;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(-20px, calc(-100% - 10px));
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        ${dropShadow};
    `,

    EmojiTopbar: css`
        width: 100%;
        background: ${accent};
        display: flex;
        flex-wrap: nowrap;
        box-sizing: border-box;
        padding: .5rem;
    `,

    EmojiBody: css`
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        padding: .75rem;
        box-sizing: border-box;
        overflow-y: auto;
        ${scrollbar};
    `,

    EmojiItem: css`
        flex-grow: 1;
        text-align: center;
        padding: .3rem;
        cursor: pointer;
    `,
}

export default {
    default: {
        ChatMessage: {
            style: css`
                display: flex;
                flex-direction: column;
                ${({ messageByMe }) => messageByMe ? "align-self: flex-end;" : ""};     
            `,
            Content: css`
                display: inline-block;
                background: ${accent};
                padding: .7em .5em;
                margin-bottom: .7em;
                max-width: 70vw;
                word-break: break-word;
                border-radius: 5px;    
                ${({ messageByMe }) => messageByMe ? "align-self: flex-end;" : ""}; 
                white-space: pre;
            `,
            Author: css`
                opacity: .3;
                margin: 0;
                margin-bottom: .2em;
                font-size: .9rem;
                ${({ messageByMe }) => messageByMe ? "text-self: right;" : ""};
            `,
        },

        ChatMessageList: css`
            padding: .5rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            overflow-y: auto;
            flex-grow: 1;

            ${scrollbar};
        `,

        ChatWindow: css`
            display: flex;
            flex-direction: column;
            background: hsl(0, 0%, 95%);
            padding: 0rem;
            color: white;
            box-sizing: border-box;
            font-family: sans-serif;
            background: #242424;
            flex-grow: 1;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        `,

        ChatMessageInput: css`
            display: flex;
            justify-self: flex-end;
            flex-wrap: nowrap;
            min-height: 50px;
            background: #333;
            position: relative;
            align-items: center;
            justify-content: center;
            text-align: left;
            z-index: 50;

            ${dropShadow};
    
            .ws-chat__input {
                flex-grow: 1;
                padding: .5rem 1rem;
            }
    
            .ws-chat__submit-btn {
                outline: none;
                border: none;
                background: ${accent};
                color: white;
                padding: 0 1rem;
                cursor: pointer;
                font-size: 1.25rem;
                vertical-align: middle;
            }
        `,

        ChatMessageInputButtonGroup: css`
            display: flex;
            justify-self: flex-end;
            flex-wrap: nowrap;
            height: calc(100% - 1rem);
            overflow: hidden;
            border-radius: 15px;
            margin: .5rem;
        `,

        IsTypingList: css`
            position: fixed;
            left: 10px;
            bottom: 70px;
            opacity: 0.7;
            z-index: 1000;
        `,

        ChatIndicatorList: css`
            display: flex;
            flex-direction: column;
            width: 30vw;
            max-width: 400px;
            color: white;
            box-sizing: border-box;
            font-family: sans-serif;
            /* background: ${accent}; */
        `,

        ChatIndicator: css`
            display: flex;
            flex-direction: column;
            width: 30vw;
            max-width: 400px;
            cursor: pointer;
            padding: 1rem;
            color: ${accent};
            background: #333;    
            ${({ active }) => active ? `
                background: ${accent};
                color: #333;
            ` : ""}
            transition: .25s all;
        `,

        IsTypingItem: css`
            animation-name: ${isTypingAnim};
            animation-duration: 3s;
            animation-iteration-count: infinite;
        `,

        ...emojiTheme,

    }
}

After that, we can import our theme set up our configuration object

import theme from "path/to/theme/file"

const config = {
    theme: theme.default,
    root: "my-chat", //the base path in which chats will be stored in Firebase
    me: {
        displayName: "Faboosh"
    }
}

...And finally, we can set up a chat window by placing the following in our render method:

<ChatProvider config={config}>
    {() => (
        <ChatWindow />
    )}
</ChatProvider>