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>