Styled Components – Future Reusability

WRITTEN BY GARETH DUNNE @JSDIARIES

The idea of reusable and modular components is often associated as being best practise with the latest and greatest in the JavaScript world. As such, some of the industry seems to be shifting towards creating components that contain a certain piece of functionality that cab exist in isolation. For example, a button or a menu.

In otherwords, this component can be migrated from project to project with little customisation needed to be fully functional. From this idea I would like to demonstrate the use of styled components.

While my personal preference for styling is still using SASS and partials there is no denying that styled components is the evolution of styling modular UI components.

A library called Styled Components is using the idea of module styled React web components.

If Styled Components perk your interest and your not familiar with the ways of React.js you might find it useful to get started with this learning resource.

Most of the guidelines are already covered in the docs here but to install Styled Components into your project enter the following in your node command line:

 npm install --save styled-components

For sure, this topic of conversation in particular has to be one of the most polarising within the dev community. It really comes down to personal preference but in the context of styled components template literal strings from ES6 JavaScript are used to describe the CSS to our component.

This is the basic concept of styled components and how it differs from standard CSS/SCSS styling sheets.

I’m not going to cover this extensively here as this a post specifically about Styled Components but if you wanted to get more in depth on this topic I’d recommend this podcast episode by Wes Bos and Scott Tolenski.

Using some examples from the docs we can declare the styled properties of a title text h1 element.

 const Title = styled.h1` 
             font-size: 1.5em;
             text-align: center; 
             color: palevioletred; `;

And its as simple as that these ES6 back ticks provide the styled data properties to our component. It definitely seems an unusual but creative way to describe style properties. But at its core it really is just like declaring normal CSS, there is no issue converting already defined CSS from one of your components or projects.

I think it is quite important that the string interpolation is still very simliar to normal CSS. It will be key to converting developers over to this way of injecting styles in JS because it already feels familiar and comfortable to use.

But this is just a basic implementation you can go on further to manipulate and interact with your styled components in combination with things like JSX in React.

This is where the ability to customise CSS with JS becomes apparent and I would highly encourage you to explore the docs even further.

Media Queries for specific styling at different dimensions are also not a problem using Styled Components. A great example from the Git demonstrates this:

// style-utils.js
import { css } from 'styled-components'

export const media = {
  handheld: (...args) > css`
    @media (max-width: 420px) {
      ${ css(...args) }
    }
  `
}

We have created our utility file that contains our specific dimension size.

import { media } from '../style-utils';

// Make the text smaller on handheld devices
const Box = styled.div`
  font-size: 16px;
  ${ media.handheld`
    font-size: 14px;
  ` }
`;

We can access this specific handheld dimension size by importing our utilty file that we just created and referencing is in our template literal string using the template variable symbol $.

In the context of React and Styled Components, we can manipulate the internal properties of our styled component using props that we send down to it.

This is perhaps the most useful thing about styled components as it can be dynamically styled based on a single prop that you send down to it.

Pretty awesome stuff and it really highlights where CSS in JS might be more useful when you want to manipulate a style based on a property or other data.

const Title = styled.h1`
  font-size: 1.5em;
  color: ${props = > ; props.primaryColor ? 'blue' : 'red'};
`;Hello JSdiaries 

As I hope I just outlined, there are a lot of benefits to creating components in this way. In the future, I wouldn’t be surprised to see mass adoption of this isolated component pattern at enterprise level. It would enable a company to create their own JavaScript UI library that could be used across a wide range of projects.

Each piece of the UI could be customised by passing down new props or injecting new template literal CSS.

But this isn’t limited to large scale projects either. The possibilities are really endless for creating migratable components like this and its really another weapon the arsenal of a frontend JavaScript developer.