"Code over a tile"// React - from sass files to Styled-Components.

After a year working as backend developer with python I was exited to learn new frontend stuff. Since I've worked in the past with and furthermore using React on freelance projects I always looking for new topics (like all javascript developers). looking on internet about new stuff I found Styled-Components that seems to be a nice way to work with the styles in React.

I'm going to try this with a Chat Application that I made a few months ago (the particularity of this chat is that it's only between two users, you can find the code here: https://github.com/ricardogcolombo/chat the idea is to improve this App in further series).

Chat View

One of the functionalities on this chat is the "typing message" text when the other user is writing (as you can find in all chats you use today WhatsApp ,Telegram,Slack...). So the idea it's simple, if Rob start typing then Laura will see a message like:

So we want to change from a react + sass files into a styled component this typing-message.

Let's begin with the chat renderer. Basically what we have in this Chat view is a header(name and typing message text), a chat window where you see the messages and the box where you write your messages... so the renderer looks like this

  return (
            <div className='chat'>
                <div className='chat-title'> {from}
                <TypingMessage to={to} currentMessage={currentMessage}/>
            </div>
            <div className='chat-window'>
                <Messages messages={messages} from={from}/>
                <div  style={{ float:"left", clear: "both" }} ref={e=> this.messagesEnd = e}></div>
            </div>
            <div className='chat-box'>
                <MessageBox  setIsTyping={setIsTyping} onSubmit={()=>onSubmitMessage(sendMessage,currentMessage[from].message,from,to,writtingMessage,moment().format('HH:mm A'))} inputValue={currentMessage[from]} writtingMessage={writtingMessage} from={from} />
                <button className='send-button' onClick={()=>onSubmitMessage(sendMessage,currentMessage[from].message,from,to,writtingMessage,moment().format('HH:mm A'))} ></button>
            </div>
        </div>
        )

Let's focus on the TypingMessage Component. If you look into the component code it's short.

./src/components/typing-message/index.js

import React from 'react'
import './typing-message.scss'

const TypingMessage = ({
    currentMessage,
    to
}) => !!(currentMessage[to] && currentMessage[to].isTyping) && <div className='typing-message'>{to} is typing...</div>

export default TypingMessage

'./src/components/typing-messages/typing-message.scss

.typing-message{
    font:11px/18px 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
    color: white;
    position: absolute;
    width: 100%;
    padding-top: 5px;
    margin: 0;
}

Time to change this... First we need to install styled components. In order to do that just open your terminal and go inside the project folder to run.

npm install --save styled-components

Then we have installed the styled components library so we need to import that to use it, add at the beginning of the file.

import styled from 'styled-components'

After that you can start moving your div into a Styled-Component 'ish' way.

First we are going to move the styles into a styled.div component and put that into a variable.

const TypingmessageComponent = styled.div`
    font:11px/18px 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
    color: white;
    position: absolute;
    width: 100%;
    padding-top: 5px;
    margin: 0;
`

Now, we have a React-Component called TypingmessageComponent with our styles (in our case we used a div element but there are other tags to use like Link, a, Button...you can find them in the docs) . As we changed that now we are able to change our renderer to use our new TypingmessageComponent instead of our <div...></div> like:

const TypingMessage = ({
    currentMessage,
    to
}) => !!(currentMessage[to] && currentMessage[to].isTyping) && <TypingmessageComponent>{to} is typing...</TypingmessageComponent>

And yes... that's it.. Your code should look something like.

import React from 'react'
import styled from 'styled-components'
// import './typing-message.scss'
const TypingmessageComponent = styled.div`
    font:11px/18px 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
    color: white;
    position: absolute;
    width: 100%;
    padding-top: 5px;
    margin: 0;
`
const TypingMessage = ({
    currentMessage,
    to
}) => !!(currentMessage[to] && currentMessage[to].isTyping) && <TypingmessageComponent>{to} is typing...</TypingmessageComponent>

export default TypingMessage

Conclusion

This styled-components are quite simple to use so you can move your styles in a progressive way until you move all your styles from sass/css/less files depending your development times and both can live together in the meantime you get that...

Pro's as you can see it's easy to maintain your styles if you have it in the same file as your component code and I think that this is one of the main motivations of this library. If you worked or saw something with Vue.js maybe you're familiar with, because you have all your code (js,html,styles) in one file. For sure in big projects this will improve the time of maintaining your code.

Con's maybe you should have in mind this when you are testing your app, as you're using third party libraries you should test them also to be sure that are doing what you want.

Note: Feedback is always welcome and maybe my writing skills are not the best in the town.