Menggunakan Styled Components di React JS

Konsep modular komponen sudah mulai banyak diterapkan di berbagai project front-end website, terutama semenjak menjamur Apps yang menggunakan React App. Dengan menerapkan styled component maka disamping component yang modular maka memungkinkan untuk membuat style yang modular pula. Jika bicara modular style pasting langsung terpikirkan sass, scss dan sejenisnya, yup bisa dibilang styled component mengandung hal tersebut. Tapi yang membuat styled components berbeda adalah, cukup import sebuah component maka style secara otomatis ada didalamnya.

Getting Started

Kamu bisa memulai menginstallnya dengan peritah

npm install --save styled-components

Untuk selanjutnya yang berbeda adakah ketika membuat komponen.

Dalam kasus ini saya berencan membuat button sekaligus dengan stylednya yang dibuat oleh styled component.

file Button.jsx

import styled from 'styled-components'
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

export default Button

Button.jsx diatas saya import ke file file yang membutuhkan.

import Button from "./Button"

render(
  <Container>
    <Button>Normal Button</Button>
  </Container>
);

Dan seperti inilah hasilnya.

Gimana contoh diatas sudah cukup menggambarkan apa itu styled component kan. Yups, tujuan dari styled component adalah memungkinkan style independent yang hanya dimiliki oleh tiap componentnya. Tapi style tersebut tidak akan static, tapi kita dibuat kondisional berdasarkan props yang dikirimkan kekomponent yang menggunakan style tersebut, contoh ini kita bahas dibawah saja.

Conditional Style With Props

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;
  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;
const Container = styled.div`
  text-align: center;
`
render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);

Dari sample diatas kita menggunakan 1 komponen Button tapi digunakan 2 kali, dan yang membedakan adalah Button kedua mengirimkan property primary, alias primary={true}.

Default dari style Button adalah menggunakan background color transparent, tapi jika mengirimkan property true, maka didalam styled component ada tambahan kondisi untuk set background color menjadi palevioletred. Dan berikut adalah hasilnya.

Why Styled Components?

Tujuan utama menggunakan styled component karena sifatnya yang modular dan praktis. Jika menggunakan 1 bundle css, maka akan banyak style yang tidak digunakan tapi terpanggil oleh browser, hal ini terpecahkan dengan styled component, browser hanya memanggil style-style yang memang hanya digunakan component yang telah dirender. 

Manfaat lainnya adalah memudahkan developer untuk maping styled dan component, tidak perlu banyak mengingat selector css,  karena disini component dan style dibuat selevel, jika ingin tahu style suatu component button, maka cek saja coding di component button tersebut.

Server Rendering Support

Styled component juga mengikuti perkembangan saat ini, dimana teknik SSR (Server Side Rendering) mulai diterapkan oleh diberbagai project yang menggunakan React JS dan beberapa UI framework lainnya. Tenang saja styled components juga support untuk itu.

Cara kerjanya adalah dengan menambahkan wrapper di main / root compoentn React kamu.

import { renderToString } from 'react-dom/server'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(
    <StyleSheetManager sheet={sheet.instance}>
      <YourApp />
    </StyleSheetManager>
  )
  const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error)
} finally {
  sheet.seal()
}

Who it's Look Like on Browser

Bagi kamu yang penasaran bagaimana hasilnya jika di browser, berikut. Styled component akan menghasilkan classname uniqe berupa hash dan sekaligus ada tambahan style tag yang mengatur style dari classname unique tadi, berikut previewnya.