Getting Started with React Firebase Chat

$3

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:

`

{() => (

)}

``